JS 非IE浏览器事件绑定：HTML事件、dom0事件、dom2事件

一、HTML事件

1、定义：事件绑定在HTML代码内部

2、事件绑定的方式：on+事件类型='函数名()'

3、注意：

(1)同一个事件类型可以绑定多个函数 函数与函数之间使用分号;相隔
(2)一次可以绑定多个不同类型的事件
<div class="box" onclick="func2();func1()" ondblclick="func3()"></div>
(3)html事件 支持事件冒泡
(4)修改一个函数所有参与该函数绑定的元素都要发生改变  耦合性太高  不推荐

4、解绑

(1)通过元素名.setAttribute('on事件绑定类型',''/null);
(2)通过元素名.removeAttribute('on事件绑定类型');

二、dom0事件

1、在js脚本中，直接通过【on+事件名】方式绑定的事件称为是DOM0级事件

2、语法：

①元素名.on+事件名 = 匿名函数

②元素名['on+事件名']=匿名函数;

③元素名.on+事件名 = 函数名

3、eg：

var box = document.querySelector('.box');
    var div1 = document.querySelector('.div1');
    var btn = document.querySelector('button');

    btn.onclick = function () {
       // box.onclick = null;
        box['onclick'] = '';
    };

    box.onclick = function () {
        box.style.backgroundColor = 'green';

        console.log('box 被点击了');
    };
  /*  function changBGC(){
        div1.style.backgroundColor='pink';
    }
    document.body.onclick = changBGC;
*/
    /*
    div1['onclick'] = function () {
        console.log('div1 被点击了');
    };

    document.body.onclick = function () {

        console.log('body 被 点击了 ');
    };
    document.documentElement.onclick = function () {

        console.log('html 被点击了');

    };
    document.onclick = function () {
        console.log('document  被点击了')
    };
    window.onclick = function () {
        console.log('window 被点击了');
    }*/

三、dom2事件

1、定义：在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。

2、语法：ele.addEvenentListener('事件类型',函数,是否捕获);

3、注意、

(1)事件不需要写 on 直接写事件名字

(2)函数可以是匿名函数也可以是有名函数

div1.addEventListener('click',changBGC);
function changBGC() {
    div1.style.backgroundColor = 'green';
}

4、是否使用事件捕获（false|true）

false:默认值 使用事件冒泡
true:使用事件捕获
例子：
var div1 = document.querySelector('.div1');
div1.addEventListener('click', function () {
console.log('被点击了');
},false);

5、dom2事件可以一个事件类型绑定多个函数执行的顺序和绑定的顺序一致

eg：

var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');

div1.addEventListener('click', function () {
    div1.style.backgroundColor = 'red';
    console.log('被点击了  div1');
}, true);

div2.addEventListener('click', function () {
    div2.style.backgroundColor='pink';
    console.log('div2被点击了');
},true);
document.body.addEventListener('click', function () {
    document.body.style.backgroundColor='yellow';
    console.log('body');
},true);

document.documentElement.addEventListener('click', function () {

    console.log('documentElement 被点击了');
},true);

6、事件传递的整体顺序：

先捕获再冒泡事件触发阶段是捕获还是冒泡要看绑定事件的元素先声明的是捕获还是冒泡谁先声明谁先执行

7、dom2事件解绑：

元素名.removeEventListener('事件类型',函数,事件传播机制);
1.匿名函数无法解绑
2.当事件采用捕获时 则最后的参数 true 不能省略

eg：

var box = document.querySelector('.box');
var btn = document.querySelector('button');
btn.onclick = function () {
    box.removeEventListener('click', show, true);
};
function show() {
    console.log('我 被 点击 了');
}
box.addEventListener('click', show, true);

JS 非IE浏览器事件绑定：HTML事件、dom0事件、dom2事件

猜你喜欢