js 事件绑定、事件监听

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

1.在DOM元素中直接绑定

2.在 javascript 代码中绑定

3.绑定事件监听函数


1.在DOM中直接绑定事件

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

<input type='button' value='click me' οnclick='hello()'>

<script>
function hello(){
alert('hello world!');
};
</script>

2.在 javascript代码中绑定

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

<input type='button' value='click me' id='btn'>

<script>
document.getElementById('btn').onclick = function(){
alert('hello world!');
};
</script>

3.使用事件监听绑定事件

事件监听是用 addEventListener()attachEvent() IE 来绑定事件监听函数的。

事件监听
关于事件监听,定义了3个事件阶段,依次是 捕获阶段目标阶段冒泡阶段

语法:

事件绑定监听函数的方式如下:

element.addEventListener(event,handler,useCapture)

事件移除监听函数的方式如下:

element.removeEventListener(event,handler,useCapture)

event:(必需)事件名,支持所有DOM事件

handler:(必需)指定要事件触发时执行的函数

useCapture:(可选)指定事件是否在捕获或冒泡阶段执行。true,捕获。false,冒泡。默认是false

注意:IE8以下不支持

<input type='button' value='click me' id='btn1' />

<script>
document.getElementById('btn1').addEventListener('click',hello);
function hello(){
alert('hello world!');
};
</script>

IE标准:

语法:

事件绑定监听函数的方式如下:

element.attachEvent(event,handler)

事件移除监听函数的方式如下:

element.detachEvent(event, handler)

event:(必需)事件类型。需加 “on”,例如:onclick

handler:(必需)指定要事件触发时执行的函数

<input type='button' value='click me' id='btn2' />

<script>
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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值