js事件高级

一、注册事件两种方式

 

 传统方式,同一个元素同一个事件,只能执行一个。新方法addEventListener()可以执行多个,按顺序执行。

addEventListener(type,function);支持i9及以上。

attachEvent(type,function);i9以前的。不推荐使用。

 二、删除事件(解绑事件)

2.1 删除事件的方式:

(1)传统注册方式:eventTarget.onclick = null;

(2)removeEventListener(type,function)

(3)detachEvent不推荐。支持i9以前的。

 

三、DOM事件流

3.1 理论知识,什么事DOM事件流

 

 3.2 使用代码验证事件流

 

 四、事件对象

4.1 什么是事件对象

 4.2 事件对象常见的属性和方法

 4.2.1 e.target和this的区别

(1)e.target返回的是触发事件的对象(元素),this返回的是绑定事件的对象(元素)

比如给ul绑定事件,点击li时触发事件。那么e.target指向li,this指向ul

兼容性问题:

 了解:跟this有个非常相似的属性 currentTarget ie678使用的

4.2.2 阻止默认行为(让链接不跳转或者点击提交按钮不提交。)

三种方式。

  • e.preventDefault()
  • e.returnValue
  • return false

 4.2.3 阻止事件冒泡

e.stopPropagation()

e.cancleBubble()

 

 4.2.4 事件委托(代理、委派)(面试重点

利用e.target获取是哪个子节点被点击 。

 4.2.5 禁止选中文字和禁止右键菜单

 但是可以用F12来复制。哈哈哈

4.2.6 获得鼠标在页面中的坐标

案例:跟随鼠标移动的天使。

https://blog.csdn.net/xuan971130/article/details/123828576icon-default.png?t=M276https://blog.csdn.net/xuan971130/article/details/123828576

 4.2.7常用键盘事件

 4.2.8 keyCode判断用户按下的哪个键(当前已经被淘汰了

e.keyCode可以得到按下键的ASCII码值

 案例:模拟京东按键输入内容

js练习:模拟京东按键输入内容_阿旋要毕业~的博客-CSDN博客1.实现效果:在页面中的任何位置,只要按下了s键,就能让输入框获得焦点。2.案例分析3.代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widthhttps://blog.csdn.net/xuan971130/article/details/123828830

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值