html事件三要素作用,js的事件、事件三要素、事件机制、事件的相关操作

js的事件、事件三要素、事件机制、事件的相关操作

1 事件的三要素：

(1)事件源、就是你点的那个div，触发的对象

(2)事件、表示动作，比如点击、滑过等

(3)事件处理函数、表示结果，比如点开关跳转到另一个页面

1.1 区分 e.target、this、e.currentTarget

e.target、就是你点击的那个节点(如果节点在某个节点的里面，那这个节点是最里面的那个节点)

this、事件绑给谁，这个this就是谁

e.currentTarget、跟this一样

div1里面有个div2，当我点击div2时，由于事件冒泡，div1的点击事件也会被触发，但是两个事件里输出的事件源都是div2，说明e.target就是你点击的那个节点

举例 e.target：

var oDiv1 = document.getElementById("div1");

var oDiv2 = document.getElementById("div2");

oDiv2.onclick = function (e) {

console.log(e.target);

};

oDiv1.onclick = function (e) {

console.log(e.target);

}

举例 this、e.currentTarget：

点击div1里面的div2，事件冒泡到div1，所以依次输出：

111、div1里的打印

222、div2里的打印

div2的节点、因为你点击的是div2，所以e.target就是div2(事件源)

div1的节点、this此刻绑定在div1上，所以打印的是div1

div1的节点、输出跟this一样，当前的事件源

var oDiv1 = document.getElementById("div1");

var oDiv2 = document.getElementById("div2");

oDiv2.onclick = function (e) {

console.log('222');

};

oDiv1.onclick = function (e) {

console.log('111');

console.log(e.target);//div2

console.log(this);//div1

console.log(e.currentTarget);//div1

}

2 事件机制：

(1)事件冒泡、会从最里面的节点开始一层一层的向外面冒泡

(2)事件捕获、与冒泡相反，从最外面的那一层开始一层一层向里面捕获事件

如果既有捕获又有冒泡，那么先捕获、后冒泡

IE浏览器不支持捕获

如下：点击最里面的div3，会冒泡，输出div3 div2 div1

oDiv1.onclick = function () {

console.log('div1');

};

oDiv2.onclick = function () {

console.log('div2');

};

oDiv3.onclick = function () {

console.log('div3');

};

3 绑定事件的几种方式：

(1)oDiv.click = function(){…}、使用这种方式只能绑定一个事件，后绑定的事件会覆盖之前绑定的事件

(2)oDiv.addEventListener(‘click’,function(){…}，false)、能同时绑定多个事件，不会覆盖、第三个参数false代表支持冒泡、true代表支持捕获

attachEvent IE的时候用这个

下面的这个捕获，从外向里输出

oDiv1.addEventListener('click', function () {

console.log('div1捕获');

},true);

oDiv2.addEventListener('click', function () {

console.log('div2捕获');

},true);

oDiv3.addEventListener('click', function () {

console.log('div3捕获');

},true);

4 阻止冒泡

(1)e.stopPropagation(); 标准浏览器

(2)e.cancelBubnle = true ; IE浏览器

oDiv3.onclick = function (e) {

console.log('div3');

e.stopPropagation();

e.cancelBubble = true;

};

5 阻止默认行为：

(1)preventDefault(); 标准浏览器

(2)returnValue = false; IE浏览器

(3)return false; 最简单的写法

默认行为是什么?

浏览器存在自己的默认行为，默认行为是浏览器的默认初始值。

有一些浏览器行为是在事件处理程序执行前发生的，也就是说这些默认行为是无法取消的，需要人为去屏蔽浏览器的默认行为。

举个常见例子全选页面内容,浏览器跳转到另外一个页面等都属于浏览器的默认行为.

6 事件委托(利用事件冒泡的原理)

(后生成元素的事件绑定问题)

当动态的向父节点里添加子节点时，后加上的节点没有之前节点绑定的事件，这个时候就可以用事件委托。通过把子节点的点击事件委托给父节点，再点击后加的子节点时，也可以根据冒泡传到父节点，变相的为这个子节点绑定了事件。

比如下面的代码，先为原有的两个li绑定点击事件，但是点击按钮后加上的li就没有点击事件，for循环为li加的点击事件在最开始初始化页面的时候就完事了，所以后加的li就没有事件。

6.1 尚未事件委托示例代码：(原生js)

click

• 111
• 222

var oBtn = document.getElementById("btn");

var oUl = document.getElementById("ul");

var aLi = document.getElementsByTagName("li");

for (var i=0;i

aLi[i].onclick = function () {

console.log(this.innerHTML);

}

}

oBtn.onclick = function () {

var num = Math.random();

var oLi = document.createElement("li");

oLi.innerHTML = num;

oUl.appendChild(oLi);

}

所以为了实现所有的li都有点击事件，可以使用事件委托来解决这个问题。

如下：将事件绑定在li的父级ul上，当点击li的时候，会自动冒泡到父级ul上，这时再动态的添加li时，点击li都会触发这事件。需要注意两个知识点。

(1)获取点击的事件源

console.log(e.target);//获取事件源，返回你点击的节点

(2)判断点击事件源的名称

if(e.target.tagName == "LI")//返回你点击节点的标签名，比如LI

6.2事件委托代码示例(原生js)：

click

111222

var oBtn = document.getElementById("btn");

var oUl = document.getElementById("ul");

var aLi = document.getElementsByTagName("li");

oBtn.onclick = function () {

var num = Math.random();

var oLi = document.createElement("li");

oLi.innerHTML = num;

oUl.appendChild(oLi);

}

oUl.onclick = function (e) {

// console.log(111);//点击li会将点击事件冒泡到ul上

// console.log(e.target);//判断点击的事件源

// console.log(e.target.tagName);//判断点击的事件源的名称

if(e.target.tagName == "LI"){

console.log(e.target.innerHTML);

}

};

9.6.3 jq尚未事件委托代码示例：

click

• 111
• 222

var oBtn = document.getElementById("btn");

var oUl = document.getElementById("ul");

var aLi = document.getElementsByTagName("li");

oBtn.onclick = function () {

var num = Math.random();

var oLi = document.createElement("li");

oLi.innerHTML = num;

oUl.appendChild(oLi);

};

$('li').on('click', function () {

console.log($(this).html());

});

9.6.4 jq事件委托代码示例：

click

• 111
• 222

var oBtn = document.getElementById("btn");

var oUl = document.getElementById("ul");

var aLi = document.getElementsByTagName("li");

oBtn.onclick = function () {

var num = Math.random();

var oLi = document.createElement("li");

oLi.innerHTML = num;

oUl.appendChild(oLi);

};

$('ul').on('click','li',function () {

console.log($(this).html());

})