jquery 监听iframe onload

转载

mob64ca1405664d 2024-10-22 10:22:11

文章标签 js事件绑定事件监听事件委托绑定事件的方法事件的绑定 文章分类 jQuery 前端开发

事件绑定：有三种常用的绑定事件的方法：

1、在DOM元素中直接绑定；

javascript

3、绑定事件监听函数。

1、在DOM中直接绑定事件

我们可以在DOM元素上直接绑定事件

例如：

function hello(){

alert('hello world!');

};

</script>

2、在 javascript 代码中绑定

在javascript代码中（即script标签内）绑定事件可以使用javascript代码与HTML标签分离，文档清晰，便于管理和开发。

例如：

document.getElementById('btn').onclick = function(){

alert('hello world!');

};

</script>

3、使用时间监听绑定事件

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

事件监听

关于时间监听，定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

语法：

element.addEventListener(event,function,useCapture)

event：（必需）事件名，支持所有DOM事件。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认是false。

注意：ie8一下不支持

例如：

document.getElementById('btn1').addEventListener('click',hello);

function hello(){

alert('hello world!');

};

</script>

IE标准：

语法：

element.attachEvent(event,function)

event:（必需）事件类型。需加“on”，例如：onclick。

function：（必需）指定要事件触发时执行的函数。

例如：

document.getElementById('btn2').attachEvent('onclick',hello);

function hello(){

alert('hello world!');

};

</script>

事件监听的优点

1、可以绑定多个事件。

例如：常规方式绑定

<input type='button' value='click me' id='btn3' />
 
<script>
 
var btn3 = document.getElementById('btn3');
 
btn3.onclick = function(){
 
alert('hello 1');//不执行
 
};
 
btn3.onclick = function(){
 
alert('hello 2');//执行
 
};
 
</script>

注意：常规事件绑定只执行最后绑定的事件。

用监听的方法来绑定

<input type='button' value='click me' id='btn4' />
 
<script>
 
var btn4 = document.getElementById('btn4');
 
btn4.addEventListener('click',hello1);
 
btn4.addEventListener('click',hello2);
 
function hello1(){
 
alert('hello 1');
 
};
 
function hello2(){
 
alert('hello 2');
 
};
 
</script>

这样两个事件都执行了。

2、可以解除相应的绑定

例如：

<input type='button' value='click me' id='btn5' />
 
<script>
 
var btn5 = document.getElementById('btn5');
 
btn5.addEventListener('click',hello1); //执行了
 
btn5.addEventListener('click',hello2); //不执行
 
btn5.removeEventListener('click',hello2);
 
function hello1(){
 
alert('hello 1');
 
};
 
function hello2(){
 
alert('hello 2');
 
};
 
</script>

封装事件监听

<input type='button' value='click me' id='btn5' />
 
//绑定监听事件
 
function addEventHandler(target,type,fn){
 
if(target.addEventListener){
 
target.addEventListener(type,fn);
 
}else{
 
target.addEventListener('on'+type,fn);
 
};
 
};
 
//移除监听事件
 
function removeEventHandler(target,type,fn){
 
if(target.removeEventListener){
 
target.removeEventListener(type,fn);
 
}else{
 
target.detachEvent('on'+type,fn);
 
};
 
};

事件委托

事件委托就是利用冒泡的原理，把时间加到父元素上，触发执行效果。

<input type='button' value='click me' id='btn6' />
 
<script>
 
var btn6 = document.getElementById('btn6');
 
document.onclick = function(event){
 
event = event || window.event;
 
var target = event.target || event.srcElement;
 
if(target == btn6){
 
alert(btn5.value);
 
};
 
};
 
</script>

事件委托的优点

1、能够提高javascript性能，事件委托可以显著的提高事件的处理速度，减少内存的占用。

例如：

<ul id='list'>
 
<li id='item1'>item1</li>
 
<li id='item2'>item1</li>
 
<li id='item3'>item1</li>
 
</ul>
 
<script>
 
var item1 = document.getElementById('item1');
 
var item1 = document.getElementById('item2');
 
var item1 = document.getElementById('item3');
 
document.addEventListener('click',function(event){
 
var target = event.target;
 
if(target == item1){
 
alert('hello item1');
 
}else if(target == item2){
 
alert('hello item2');
 
}else if(target == item3){
 
alert('hello item3');
 
};
 
});
 
</script>

2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

<ul id='list'>
 
<li id='item1'>item1</li>
 
<li id='item2'>item2</li>
 
<li id='item3'>item3</li>
 
</ul>
 
<script>
 
var list = document.getElementById('list');
 
document.addEventListener('click',function(event){
 
var target = event.target;//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口 

 
if(target.nodeName == 'LI'){
 
alert(target.innerHTML);
 
};
 
});
 
var node = document.createElement('li');
 
var textnode = document.createTextNode('item4');
 
node.appendChild(textnode);
 
list.appendChild(node);
 
</script>

注释：

什么是nodeName？

获得bod元素的节点名称：

定义和用法：

nodeName属性指定节点的节点名称。

如果节点是元素节点，则nodeName属性返回标签名。

入股节点是属性节点，则nodeName属性返回属性的名称。

对于其他节点类型，nodeName属性返回不同节点类型的不同名称。

什么是event对象？

event对象代表事件的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

其实 event对象就是事件的结合。