JS事件之事件绑定与事件监听
事件绑定
在我们对一个元素绑定了事件处理函数,并且事件触发后,我们才会得到自己想要的与网页的交互。抛开事件监听函数不谈,我们有两种绑定事件处理函数的方法:
1.通过HTML来绑定事件处理函数
<a href="" onclick="fo()">hello</a><script>function fo(){alert('Hello World!')}</script>
这种方式和写css样式时通过标签的style属性直接设置行内样式类似。这样会让代码看起来一团糟,也违背了将实现动态行为的代码与显示文档静态内容的代码相分离的原则。
2.在JavaScript 中绑定事件处理函数
如果在JavaScript 中分配事件处理函数, 首先获得要处理的对象的引用,然后将函数赋值给对应的事件处理函数属性。
<button id="mylink"></button>
<script>var link = document.getElementById("mylink");link.onclick = function () {alert("Hello World !");};
</script>
但我们想要对同一个对象使用onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,只会执行最后绑定的方法。但事件监听就不受一个元素只能绑定一个事件的限制
3.事件监听器
关于事件监听起初Netscape制定了JavaScript的一套事件驱动机制(即事件捕获)。随即IE也推出了自己的一套事件驱动机制(即事件冒泡)。最后W3C规范了两种事件机制,分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制(前端人员一直头痛的兼容性问题),IE9以后IE也支持了W3C规范。
IE浏览器(IE9以下的浏览器,以下提到的IE均表示IE9以下的):
element.attachEvent(onevent,function);
event:事件类型,需要在事件类型前加‘on’。
function:指定要事件触发时执行的函数。
要注意:利用attachEvent注册的处理函数调用时this指向不再是先前绑定事件的元素,这时的this为window对象。
支持W3C标准事件监听器的浏览器:
element.addEventListener(event, function, boolean)
event : 事件类型名,与IE不同的是前面不用加‘on’ 。
function:指定要事件触发时执行的函数。
boolean:指定事件在捕获或冒泡阶段调用。默认时为false,true表示捕获阶段。false表示冒泡阶段。
封装一个可以兼容的绑定事件监听的函数:
function addEvent(ele,event,function,boolean){if(ele.addEventlistener){//支持W3C标准事件监听器的浏览器ele.addEventlistener(event,function,boolean)}else if(ele.attachEvent){//IE9以下的浏览器ele.attachEvent('on'+event,function(){ },boolean)}else{ele['on'+event] = function;}}addEvent(box,'click',function,false)
JS事件之事件绑定与事件监听相关推荐
- 「后端小伙伴来学前端了」关于Vue中的自定义事件,组件绑定自定义事件实现通信
傍晚的月亮 前言 原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令 要讲自定 ...
- MUI click事件无效 click没反应 click监听不到
MUI click事件无效 click没反应 click监听不到(有的说tap会点击两次,换成click就没事的案例,试了一下不成功还是用tap比较好) html 部分代码: <li id=&q ...
- jQuery-给ul添加了li之后,添加的li并没有绑定点击监听怎么办?
我们看一个简单的例子 效果图如下 这里面有一个ul里面套着4个li,还有一个独立的li 代码实例: 需求 1.点击li,背景就会变成红色 2.点击btn,就会添加一个li <html>&l ...
- Object.defineProperty与双向绑定、数据监听
一.对象赋值的两种方式 一是"="赋值,一是Object.defineProperty方法,而当下流行框架中广泛应用的双向绑定和数据监听等,就是利用的第二种方式,关于此方法不多讲, ...
- js如何监听元素事件是否被移除_JavaScript 监听元素是否进入/移出可视区域
JavaScript 监听元素是否进入/移出可视区域 常规操作 防抖节流 IntersectionObserver 兼容的代码 常规操作 通常的做法是,监听srcoll事件,根据元素的offset来判 ...
- js如何监听元素事件是否被移除_js 监听事件的叠加和移除 -
// 匿名函数事件无法移除 window.addEventListener("resize",function(){ alert(1) }) // 监听具名函数事件 functio ...
- html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别 按钮 var test = function(){ var span = document.createElement("span&q ...
- JS解决因循环绑定click事件失效
很多js新手都会在绑定事件遇到绑定失效的问题. 大致思路就是,比如用一个循环让对应的button按钮绑定对应的事件. 比如这样 <button id="1">1 < ...
- vue笔记(二)Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网 一 .class.style操作 二.事件 三.计算属性 四.数据监听.观测 五.指令+自定义指令 六.过滤器 一 .class.style操作 官网 1. class使用: (1)v-b ...
- 红橙Darren视频笔记 自定义RatingBar touch事件学习 dp转px listener监听
效果图: 一 需求分析 我们需要实现评分的控件 那么主要有几步 1.绘制出评分控件 2.响应用户的触摸改变星星数 3.控件发生星星变化时通知监听者 二 自定义属性 需要属性: 星星总数 选中星星的图片 ...
最新文章
- 为什么不使用多机训练神经网络
- shell中常用系统变量和条件判断
- python代码怎么设置,如何设置PyCharm中的Python代码模版(推荐)
- shell中的Here Document
- long logn的大小c语言,基本排序(C语言版) - ________MX的个人页面 - OSCHINA - 中文开源技术交流社区...
- 易语言 mysql_易语言MySql注册登录
- B. Who‘s Opposite?
- 2729: [HNOI2012]排队
- CSS3 基础(1)——选择器详解
- php语言的cmpp协议应用
- BI报表工具有哪些?
- windows文件夹正在使用
- jQuery-放大镜
- android坐标计算器,函数科学计算器算坐标
- 王学岗视频编码————视频编解码基础与MediaCodec编解码(对应1234节)
- 项目部署三---linux下Nginx安装
- android listview 导航条,Android侧边导航栏+ListView基础实践
- LAMP--MySQL数据库
- 前端鼠标移入悬浮框针对页面顶部和底部的定位设置
- Hadoop(二): YARN(资源管理器 RM)、HBase高可用集群搭建
热门文章
- line-height绝对值和相对值的区别
- java象棋代码注释_中国象棋程序的设计与实现(十一)--棋盘绘制算法(尽管注释非常详细,完全理解仍有难度)...
- 笔记Mac下配置nginx+rtmp模块推流服务器碰到的问题:Error: This tap is now empty as all its formulae were migrated
- 计算—六合彩的中奖概率
- 一文理解所有需求分析中的基本术语
- 目标检测论文阅读:GFL算法笔记
- 罗技 跨计算机控制,罗技新款 MX 鼠标,可多台电脑间跨屏快速切换使用
- php配置设置时区,php如何设置时区
- “由于文件许可权错误,word无法完成保存操作”解决
- 金蝶云苍穹开发实用整理