JS的事件

目录

一、事件三要素

1.绑定事件

1)在DOM元素中直接绑定

2)在JavaScript代码中绑定

3)使用监听函数addEventListener() 绑定

2.解绑事件

1) 直接删除法,使用“对象.οnclick=false;”

2)使用addEventListener绑定事件,使用removeEventListener删除绑定事件即可

3.常用事件

1).load事件

2)unload事件

3)resize事件

4)scroll事件


一、事件三要素

事件源:网页上的元素。如:按钮,输入框等

事件类型:为用户或浏览器的行为。如:鼠标点击,选中输入框等

事件处理程序:事件发生后定义的程序。如:跳转网页、算数运算等。

1.绑定事件

1)在DOM元素中直接绑定

<button οnclick=“alert(2)">按钮</button>

违反了HTML与JavaScript代码相分离的原则,一般不用

2)在JavaScript代码中绑定

<script>

var btn = document.getElementById('btn')

        btn.οnclick=function(){

            alert("我被点击了~~~")

        }

</script>

同一元素同一个事件只能定义一个监听函数

3)使用监听函数addEventListener() 绑定

<script>

       document.getElementById('btn').addEventListener('click',function(){

            alert(5);

        });

</script>

可以针对同一个元素的同一个事件,添加多个监听处理函数

2.解绑事件

1) 直接删除法,使用“对象.οnclick=false;”

2)使用addEventListener绑定事件,使用removeEventListener删除绑定事件即可

3.常用事件

事件

说明

onclick

鼠标单击时触发此事件

ondblclick

鼠标双击时触发此事件

onmouseover

鼠标移动到某个设置了此事件的元素上时触发此事件

onmouseout

鼠标从某个设置了此事件的元素上离开时触发此事件

onfocus

当某个元素获得焦点时触发此事件

onblur

当前元素失去焦点时触发此事件

onkeydown

当键盘上的某个按键被按下时触发此事件

onkeyup

当键盘上的某个按键被按下后弹起时触发此事件

1).load事件

此事件为当页面完全加载完之后(包括所有的图像、js文件、css文件等外部资源),就会触发window上面的load事件。

这个事件是JavaScript中最常用的事件,比如我们经常会使用window.οnlοad=function(){};这种形式,即当页面完全加载完之后执行其中的函数。

另外,这个事件还可以用在其他元素上,比如图像元素,

<img src="01.png" οnlοad="alert('加载完毕')">

2)unload事件

显然,这个事件是与load事件相对的。在文档被完全卸载后触发。用户从一个页面切换到另一个页面就会触发unload事件。利用这个事件最多的情况是清除引用,避免内存泄漏。

这个事件同样有两种方式来指定。一种是JavaScript方式,使用EventUtil.addHandler();另一种就是在body元素中添加一个特性。

值得注意的是,一定要小心编写onload事件中的代码,因为它是在页面卸载后才触发,所以说页面加载后存在的那些对象,在onload触发之后就不一定存在了!

<body οnlοad="alert('changed')"></body>

3)resize事件

当调整浏览器的窗口到一个新的宽度或高度时,就会触发resize事件。这个事件在window(窗口)上面触发。因此同样可以通过JS或者body元素中的onresize特性来指定处理程序。

<body οnresize="alert('窗口已改变')"></body

即浏览器的大小发生改变时就会弹出弹框。

4)scroll事件

这个事件会在文档被滚动期间重复被触发,所以应当尽量保持事件处理程序的代码简单。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值