事件绑定+call apply指向
JS高级
事件——
浏览器客户端上客户触发的行为都称为事件
所有事件都是天生自带的,不需要我们去绑定,只需要我们去触发,通过obj.事件名=function(){ }
事件名:onmousemove;onmouseup;onmousedown;等等
当用户触发一个事件时,浏览器所有详细信息都存在一个叫event的对象身上;我们把它叫事件对象
所有的事件在绑定方法的时候,天生自带一个参数叫Event
鼠标的坐标:
event.clientX event.clientY
event的兼容性:
在Chrome(谷歌)下event是undefined
在IE低版本(7,8,9)下event是null
在火狐下event会报错
document.onclick=function(ev){
var ev=ev||windo.event
}
事件冒泡:
定义:
当父子元素的同一事件绑定方法时,触发了子元素身上的事件,执行完毕之后,也会触发父级元素的相同事件,这种传播机制叫事件冒泡
取消事件冒泡:
event对象有个属性叫 cancelBubble,默认值是false;改成true就取消了;
事件捕获:
给一个元素绑定事件;普通写法——
obj.onclick=function(){}
obj.onclick=function(){} 相当于给obj的onclick属性赋值
缺点:会覆盖
事件绑定的第二种写法——
标准浏览器:addEventListener
IE低版本:attachEvent
addEventListener(参数1;参数2;参数3)
参数1:事件名,事件名不能带 “ on ”
参数2:事件函数
参数3:布尔值;代表捕获不捕获,默认为false,不捕获但是冒泡
定义:
IE低版本没有捕获;
普通事件绑定写法没有捕获(因为会覆盖)
给父元素用addEventListener()绑定同一事件时,当触发子元素身上的事件时,先触发父元素,然后在传递给子元素,这种传播机制叫事件捕获
addEventListener() 和 attachEvent()二者区别:
1,attachEvent()只用在IE8 以下;addEventListener()适合标准浏览器
2,attachEvent()事件名带 “ on ”;addEventListener()事件名不带 “ on ”
3,attachEvent()函数里面的this是window;addEventListener()函数里面的this是触发该事件的函数(当前元素对象)
4,attachEvent()只用冒泡,没有捕获;addEventListener()可有冒泡,可有捕获
call()和apply():
改变函数内部的this指向,的方法
xxx.call()或 xxx.apply() xxx必须是function(普通函数;类;构造函数)
call()中的第一个参数是null的时候,函数里面的this还是指向原来的,不变
var obj={
name:"志伟"
}
function fn(){
console.log(this.name)
}
*所有的事件都是异步的
事件绑定+call apply指向的更多相关文章
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...
- jQuery使用(七):事件绑定与取消,及自定事件的实现原理
实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- js事件绑定及深入
学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
- Javascript 事件对象(四)一个事件绑定多个不同的函数
给一个对象绑定多个事件处理函数: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...
- js 事件绑定
事件绑定的方式 1. DOM 元素行内绑定 <div onclick="alert(1)"></div> 2. js on+eventType do ...
- dojo事件驱动编程之事件绑定
什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...
随机推荐
- TL-WDN5200H无线usb网卡在Linux上的使用
买了个TL-WDN5200H无线usb网卡,但是发现它居然不支持Linux,但是我有时需要在Linux上使用,这就尴尬了.于是到网上搜索资料,终于解决了这个问题. 首先编译安装:https://git ...
- Leetcode周赛165
目录 找出井字棋的获胜者 思路 代码 不浪费原料的汉堡制作方案 思路 代码 统计全为 1 的正方形子矩阵 思路 代码 分割回文串 III 思路 代码 找出井字棋的获胜者 思路 模拟. 代码 class ...
- [HZOI 2016] 偏序(CDQ套CDQ)
传送门 思路: 就是cdq套cdq的模板题 #include <bits/stdc++.h> using namespace std; typedef long long ll; cons ...
- jQuery中关于Ajax的详解
原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...
- NOIP 2008 立体图
洛谷 P1058 立体图 洛谷传送门 JDOJ 1541: [NOIP2008]立体图 T4 JDOJ传送门 题目描述 小渊是个聪明的孩子,他经常会给周围的小朋友们将写自己认为有趣的内容.最近,他准备 ...
- 回溯法 | n皇后问题
今早上看了一篇英语阅读之后,莫名有些空虚寂寞冷.拿出算法书,研读回溯法.我觉得n皇后问题完全可以用暴力方式,即先对n个数进行全排列,得到所有结果的下标组合,问题规模为n!. 全排列花了比较久的时间才编 ...
- Spring Boot 知识笔记(创建maven项目、HTTP接口)
一.使用Maven手工创建SpringBoot应用(IDEA) 1. 点击File——New——Project——Maven——Next,填写相关信息,创建项目. 2. 在pom.xml中添加相关 ...
- java信号量
维基百科解释的信号量概念如下 信号量(英语:semaphore)又称为信号标,是一个同步对象,用于保持在0至指定最大值之间的一个计数值.当线程完成一次对该semaphore对象的等待(wait)时,该 ...
- python总结五
1.is和==的区别:官方文档解释:is表示的是对象标识符,而==表示的是相等equal,is的作用是用来检查对象的标识符是否一致,也就是两个对象在内存中的地址是否一样 而==是用来检查两个对象是否相 ...
- Computer-Hunters——项目系统设计与数据库设计
Computer-Hunters--项目系统设计与数据库设计 前言 本次作业属于2019秋福大软件工程实践Z班 本次作业要求 团队名称: Computer-Hunters 本次作业目标:撰写一份针对团 ...