今天完成的事：对任务2 的修改；冒泡和js jq绑定事件的一个了解

明天要完成的事：继续任务2的修改，并看资料

难题：师兄对我的任务2提出了需要修改的地方；第2个界面的事件不对；js和jq对绑定事件的不同；且jq要使用bind去绑定事件；不然不会执行；

收获：

js和jq对事件的不同：js事件可以直接绑定但jq要使用bind方法或者on方法去绑定事件；不然不会执行这些事件（点击事件例外）；

window。event是指事件的状态

var e = event || window.event || arguments.callee.caller.arguments[0]; 

onkeydown、onkeyup、onclick

onkeydown 是按键按下时触发；

onkeyup 是按键弹起时触发；

onclick 是按键按下并弹起时触发。

有一种情况，就是按住按键不放，此时会不断地触发 onkeydown，但 onkeyup、onclick 只是在抬起按键的时候触发一次。

要实时检测正在输字的文本框中输入了多少文字，怎么办？

用 onkeyup 不可取！

因为我们前面讲过，如果按住按键不放，文字会一直输进去，可是 onkeyup 只触发一次。况且如果不是按键，是鼠标右键粘贴怎么办？

用 onkeydown 不可取！

onchange、oninput、onpropertychange

这三个属性都可用于文本框，从字面上理解 onchange 是文本框内容改变时触发，但实际是有限制的：

一、只有人工触发才有效，如果利用 JavaScript 程序改变是没有效果的。

二、只有当文本框失去焦点时才触发，也就是说并不是我们在打字的时候就会触发，而是在打完这后，焦点移出去之后，才触发，这点相当不爽。

而 oninput、onpropertychange 是为了弥补 onchange 的缺陷产生的，它们虽然不能解决第一个问题，但解决第二个问题已经不错了。

oninput 是 Chrome 支持的，onpropertychange 是 IE 支持的。

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

on（）在被选元素及子元素上添加一个或多个事件处理程序。

（以上是客户端触发；在我添加js事件时发现一个教程上没有的但是又是必不可少的这部分没搞懂

on添加事件时在事件前面有个标签名，这个标签名不能用类名和id代替必须是标签名就很奇怪）

$(selector).on(event,childSelector,data,function)这个是on和bing的语法都没有提到这一点

trigger() 方法触发被选元素的指定事件类型 trigger是js触发的

这个让我联想到昨天学的一个冒泡对事件的绑定：实现方式可用addEventListener();  这个addevent和addeventListener()是绑定事件用的事件监听函数；

总结一下绑定事件的办法：

一.html标签里绑定事件和函数：

不过后面写完难以维护；而且存在一个时差问题，因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件（比如js代码还没有下载下来），由此会引发错误。

二.js绑定事件；但是js绑定事件只能绑定一个事件

优点：简单和所有浏览器都支持。

缺点是：只能给该元素绑定一个事件

三. 绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

关于第三个参数一般填写默认值false或不填，因为：大多数情况下，都是将事件处理程序添加到时间流的冒泡阶段，这样可以最大限度地兼容各种浏览器，如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。关于捕获和冒泡同时存在的情况下我总结了以下几点：

1）冒泡且捕获：捕获导致不能进入更低层事件，点击该层的更低层只能触发该捕获层，一般为了不阻断其他事件的触发设置捕获为false。

（2）冒泡但不捕获：执行冒泡顺序，从触发层从内到外执行事件，与事件监听绑定的顺序无关。

（3）若多级包含元素且多个元素都添加事件监听则为了更稳定的执行时间需要：①每个元素的事件监听的捕获都设置为false或不填。②并且在执行函数内阻止冒泡。

jq的绑定事件的方法

bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；这也是bing和on的区别https://www.cnblogs.com/GlenLi/p/6886675.html对on的详细介绍

这个on解释了一部分上面的问题：这是绑定了2个事件样式但是为啥要有个2个事件一个就无法执行呢？后面修改完发现可以直接用input搞定不用oninput？？就很懵所以是这个on影响事件执行；那么on代表什么？事件和dom事件的区别吗？（大部分是有on的是js    没有on的是jq；）

这又引申出了更多的问题：

event：事件方法

dom event ：事件

jQuery 事件方法

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

有on的是jq的一种属性不是之前说的方法；属性是本身就有的直接可以用，这种属性是事件是都dom本来就有的，而没有on的事件方法方法本来没有需要绑定；

根据 target 找到的实战dome

window.onload = function(){
            var oBox = document.getElementById("box");

获取父元素
            oBox.onclick = function (ev) {
父元素点击则运行函数                

var ev = ev || window.event         

var target = ev.target || ev.srcElement;

target被赋予dom当前操作的dom
                if(target.nodeName.toLocaleLowerCase() == 'input'){
当前target。nodename是获取了当前节点位置并且知道是哪个标签名 

target就可以表示为当前的事件操作的dom，但是不是真正操作dom。

nodename是标签名

switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }

        }  

以及与此相关的如何组织其默认事件和冒泡：

阻止事件冒泡——EVENT.STOPPROPAGATION()

阻止事件冒泡——CANCELBUBBLE

阻止默认事件——EVENT.PREVENTDEFAULT()

阻止默认事件——RETURNVALUE