1.js补充：js事件和函数

一、注册事件的两种方法：

1、传统方法：一个对象只能绑定一个事件

　　var btn = document.querySelectorAll(‘button’);

       btn[0].onclick =function() {

            alert("hello")

}

2、事件监听注册：可以绑定多个事件

var btn = document.querySelectorAll(‘button’);
btn.addEventListener('click', function() {
    alert("hello")
})

　　

二、删除事件

1、传统事件删除

　　var btn = document.querySelectorAll(‘button’);

       btn[0].onclick =function() {
            alert("hello")
            btn[0].onclick = null;
}

　　

2、监听事件删除

btn[0].assEventListener('click', fn);

function fn()  {
  alert(22);
  btn[0].removeEventListener('click', fn);
}

　　

三、DOM事件流：事件发生时，会在元素节点之间按顺序传递：捕获阶段、冒泡阶段

但是因为其它节点没有绑定事件，所以即使会发生事件流，但是其他节点不会触发事件。

①、捕获阶段：事件由上往下捕获，document --> html --> body --> 绑定事件的元素：少见

②、冒泡阶段：事件由下往上冒泡，绑定事件的元素 --> body --> html --> document：多见

 阻止冒泡：e.stopPropagation();

事件冒泡实际应用技巧：给父元素绑定事件，不要给每一个子元素绑定，这样点击子元素的时候会往上冒泡，触发父元素事件，

这样可以节省代码提高效率。

 

四、事件对象：写在事件对象函数的小括号里，类型形参

btn[0].onclick =function(event) {}

①、只有有了事件才会有事件对象，不需要传递参数。

②、事件对象：关于事件一些列相关数据的集合，比如鼠标点击事件里面就包含了：鼠标点击坐标等信息，键盘事件就有哪个键的相关信息。

 ③、常见鼠标事件对象：

e.target:返回触发事件的对象。

e.type:返回事件类型。

e.preventdefault():阻止默认行为。

e.stopPropagation()：阻止冒泡

e.clientX：鼠标距离可视屏幕的x轴距离。左上角为原点。

e.clientY:鼠标距离可视屏幕的y轴距离。左上角为原点。

e.pageX：鼠标距离整个页面顶端的x轴距离。

e.pageY:鼠标距离整个页面顶端的y轴距离。

④、常见键盘事件（keyup、keypress{区分大小写}、keydown）对象：

e.keyCode:判断键盘ascll码值。

 

二、js函数

     // ①、普通函数

         function fn() {
            console.log(11);
        }
        fn();

        function fn1(name, age) {
            console.log(name, age);
        }
        fn1('张三', 22);

　　    // ②、匿名函数
        var fn2 = function() {
　　　　　　　log(11);
         }

       // ③、立即执行函数
        (function () {
            console.log('hello');
        })(); 

        (function (a, b) {
            console.log(a + b);
        })(1, 2);