js事件 （包含call()方法使用特点）
1、焦点事件
获取焦点事件onfocus\失去焦点事件onblur
例： oText.onfocus=function(){}
焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么它就可以接受用户的输入
可以通过这些方式来给元素设置焦点
1、点击 2、tab 3、js
不是所有元素都能够接收焦点，能够相应用户操作的能够与用户交互的元素才有焦点
元素.focus()： 给指定元素设置焦点，该事件不会冒泡
元素.blur():取消指定元素的焦点，该事件不会冒泡。除了获取焦点和取消焦点的事件不会冒泡，其他的表单元素会冒泡
元素.select():选择指定元素里面的文本内容，只能选取可交互性里面的内容，像div标签里的内容是获取不到的。
例：oText.select();全选文本框中的内容
2、Event对象
用来获取事件的详细信息：鼠标位置、键盘按键
event：事件对象，当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方 ---event对象，供我们在需要的时候调用。
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时候决定，而是取决于这个调用的时候
Event对象兼容： IE/chrome：event是一个内置全局对象
标准下：事件对象是通过事件函数的第一个参数传入的
解决兼容性问题：var ev=事件函数参数 || event （ev=ev||window.event）
如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象
Event对象下获取鼠标位置：clientX clientY //获取的是可视区的相对顶部top，和相对left的距离
onmousemove:当鼠标在一个元素上移动的时候触发 ，触发的频率不是像素，而是时间间隔，在一个指定的时间内（很短），如果鼠标的位置和上一次的位置对比发生变化，那么就会触发一次。
方块跟着鼠标移动例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
document.onmousemove=function (ev) {
var ev=ev||event;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意要获取滚动条向下移动的距离
oDiv.style.left=ev.clientX+'px';
oDiv.style.top=scrollTop+ev.clientY+'px';
}
}
</script>
<div id="div1" style="width: 100px;height: 100px;background-color: #ff6471;position: absolute"></div>
</body>
</html>
3、事件流
事件冒泡：当一个元素接收到一个事件的时候，会把他接收到的所有传播给他的父级一直到顶层window。默认情况下都会都冒泡行为。
阻止冒泡：当前要阻止冒泡的事件函数中调用event.cancelBubble=true；
除了获取焦点和取消焦点的事件不会冒泡，其他的表单元素会冒泡。IE定义了focusin和focusout事件可以冒泡，来替代fucus和blur事件
元素.onclick=fn1;fn1为函数 给这个元素加事件，给元素加事件处理函数。 （事件函数的绑定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
div{
padding: 40px;
}
#div1{
background: #5cff69;
}
#div2{
background: #5fccff;
}
#div3{
background: #ff6471;
}
</style>
</head>
<body>
<script>
window.onload=function () {
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
function fn1() {
alert(this.id);
}
//事件函数绑定--------执行结果：div3 div2 div1 事件的冒泡
oDiv1.onclick=fn1;
oDiv2.onclick=fn1;
oDiv3.onclick=fn1;
}
</script>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
#div1{
width: 100px;
height: 200px;
background: red;
position: absolute;
left:-100px;
top: 100px;
}
#div2{
width: 30px;
height: 60px;
position: absolute;
top: 70px;
right: -30px;
background: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function () {
this.style.left='0px';
}
oDiv.onmouseout=function () {
this.style.left='-100px';
}
}
</script>
<div id="div1">
<div id="div2">
分享到
</div>
</div>
</body>
</html>
事件捕获：
IE下是没有的，在绑定事件中，标准下是有的
1、给对象绑定一个事件处理函数的第一种形式------obj.onclick=fn;属于赋值形式，后面的赋值会覆盖前面的赋值
<script>
function fn1() {
alert(1);
}
function fn2() {
alert(2);
}
document.onclick=fn1;
document.onclick=fn2;
//结果只显示2，会覆盖前面绑定的fn1
</script>
2、给一个元素绑定事件函数的第二种形式 ------给对象的同一个事件绑定多个不同的函数
兼容性问题：
IE：obj.attachEvent(事件名称，事件函数);
1、没有捕获
2、事件名称有on
3、事件函数执行顺序：标准下->正序 非标准下->倒序
4、this指向window
函数调用方法：fn1()==fn1.call();call函数最大的特点是可以传参：call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表。如果第一个参数传入的是null，则指向之前默认的对象。
可以通过: 事件函数.call(obj);来改变this指向问题
<script>
function fn1() {
alert(1);
}
function fn2() {
alert(2);
}
document.attachEvent('onclick',fn1());
document.attachEvent('onclick',fn2());
</script>
我执行结果是：只能弹出1
标准下：obj.addEventListener(事件名称，事件函数，是否捕获);//是否捕获：默认是false false：冒泡（从下到上） true：捕获（从上到下）
1、有捕获
2、事件名称没有on
3、事件函数执行顺序正序
4、this指向触发该事件的对象
解决绑定事件的兼容性问题方法： 可以实现多个函数绑定，正确的this指向
function bind(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on'+evname,function(){
fn.call(obj);
});
}
}
bind(document,'click',fn1);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡与捕获</title>
<style>
div{
padding: 40px;
}
#div1{
background: #5cff69;
}
#div2{
background: #5fccff;
}
#div3{
background: #ff6471;
}
</style>
</head>
<body>
<script>
window.onload=function () {
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
function fn1() {
alert(this.id);
}
//事件函数绑定--------执行结果：div3 div2 div1 事件的冒泡
// oDiv1.onclick=fn1;
// oDiv2.onclick=fn1;
// oDiv3.onclick=fn1; //true表示是捕获
// oDiv1.addEventListener('click',fn1,true);
// oDiv2.addEventListener('click',fn1,true);
// oDiv3.addEventListener('click',fn1,true);
// //执行结果：div1 div2 div3 //false表示是冒泡
oDiv1.addEventListener('click',fn1,false);
oDiv2.addEventListener('click',fn1,false);
oDiv3.addEventListener('click',fn1,false);
//执行结果是 ：div3 div2 div1
}
</script>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
1、第一种事件绑定形式的取消
document.onclick=null;
2、第二种事件绑定形式取消
IE：obj.detachEvent(事件名称，事件函数)； 例：document.detachEvent('onclick',fn1);
标准：obj.removeEvenListener(事件名称，事件函数，是否捕获)；
4、键盘事件：
onkeydown:当键盘按键按下的时候触发,如果按下不抬起，那么会连续触发，但是会有一个问题，连续触发的开始会稍微停顿一下，会有一个时间间隔。可以通过定时器来解决。
oText.onkeydown=function(){alert(this.value);//弹出的是上一次输入后的内容}
oText.onkeyup=function(){alert(this.value);//弹出的是本次输入的内容}
onkeyup:当键盘抬起的时候触发
event.keyCode: 数字类型 键盘按键的值 键值
ctrlKey,shiftKey,altKey 布尔值 ------当一个事件发生的时候，如果ctrl||shift||alt 键是按下的状态，返回true，否则返回false
并不是所有元素都能够接收键盘事件，能够相应用户输入的元素，能够接收焦点的元素就能够接受键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件(留言本 键盘控制方块移动)</title>
</head>
<body>
<script>
// window.onkeydown=function () {
// var ev=ev||event;
// alert(ev.keyCode)
//
// }
// document.onclick=function (ev) {
// var ev=ev||event;
// alert(ev.ctrlKey);
// }
window.onload=function () {
var oText=document.getElementById('text1');
var oUl=document.getElementById('ul1');
oText.onkeyup=function (ev) {
var ev = ev || event;
if (this.value != '') {
if (ev.keyCode == 13) { //按回车键发送 如果要想按ctrl+回车一起需要if(ev.keyCode==13&& ctrlKey)
var oLi = document.createElement('li');
oLi.innerHTML = this.value;
if (oUl.children[0]) {
oUl.insertBefore(oLi, oUl.children[0])
} else {
oUl.appendChild(oLi);
}
} }
}
var oDiv=document.getElementById('div1');
document.onkeydown=function (ev) {
var ev=ev||event;
switch (ev.keyCode){
case 37:
oDiv.style.left=oDiv.offsetLeft-10+'px';
break;
case 38:
oDiv.style.top=oDiv.offsetTop-10+'px';
break;
case 39:
oDiv.style.left=oDiv.offsetLeft+10+'px';
break;
case 40:
oDiv.style.top=oDiv.offsetTop+10+'px';
break;
}
}
}
</script>
<input type="text" id="text1">
<ul id="ul1"></ul>
<div id="div1" style="width: 100px;height: 100px;background-color: #ff6471;position: absolute"></div>
</body>
</html>
5、鼠标事件
对于click事件，detail属性指定了其是否是单击，双击，还是三击
6、阻止事件默认行为办法：
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false
oncontextmemu:右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发
js事件 （包含call()方法使用特点）的更多相关文章
- js 事件阻止传播方法,准确定位事件源
1事件冒泡 在目标元素获得机会处理事件后,事件模型检查目标元素的父元素,看是否为同类型事件建立了处理程序.如果是,则也调用父元素的处理程序.在这之后,再检查其父元素,然后父元素,然后父元素...持续不 ...
- js事件绑定的方法
废话不多少,直接上代码 第一种 <body> <div style="width:400px;height:400px;background:blueviolet" ...
- HTML中关于动态创建的标签无法绑定js事件的解决方法：.on()方法的 [.selector]
在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题.如下代码,使用jquery在body中动态创建一个class为demo的Button按 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS判断字符串包含的方法
本文实例讲述了JS判断字符串包含的方法.分享给大家供大家参考.具体如下: 1. 例子: 1 2 3 4 5 6 7 8 var tempStr = "tempText" ; var ...
- Node.js事件的正确使用方法
前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的 ...
- 原生js事件委托（事件代理）方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- 使用CEfSharp之旅（2） js前台事件执行后台方法
原文:使用CEfSharp之旅(2) js前台事件执行后台方法 版权声明:本文为博主原创文章,未经博主允许不得转载.可点击关注博主 ,不明白的进群191065815 我的群里问 https://blo ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
随机推荐
- MapperException: 无法获取实体类xxxxx对应的表名! 三种解决方法，总有一款适合你。
先把自动重启关一下 devtools: restart: #热部署生效 enabled: false 把devtools给删除了,说是这个jar包导致 ApplyApplication里面的@Mapp ...
- 解决wubi安装ubuntu时要下载系统映像文件问题
转载:一个人的旅行的博客(http://www.cnblogs.com/rollenholt/articles/2607433.html) 下面我介绍解决wubi安装ubuntu时要去官网下载系统映像 ...
- （DP）51NOD 1007正整数分组
将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的. 输入 第1行:一个数N,N为正整数的数量. 第 ...
- java高分局之jstat命令使用
S0C S1C S0U S1U EC EU OC OU MC MU CCSC CCSU YGC ...
- 第02课 操作系统及Linux 系统介绍
1.操作系统介绍 操作系统(Operating System,简称OS),是计算机系统中必不可少的基础系统软件,它是应用程序运行以及用户操作必备的基础环境支撑,是计算机系统的核心. 操作系统的作用是管 ...
- 127 Word Ladder 单词接龙
给出两个单词(beginWord 和 endWord)和一个字典,找到从 beginWord 到 endWord 的最短转换序列,转换需遵循如下规则: 每次只能改变一个字母. 变换过程中的 ...
- (024)[工具软件]截屏录屏软件FSCapture(转)
该软件比 Snipaste 增加的功能有滚动截图和屏幕录制. 原文地址:https://www.appcgn.com/faststone-capture.html FastStoneCapture,简 ...
- H5图片预览功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- ios学习笔记 UITableView（纯代码） （一）
参考 “https://www.cnblogs.com/ai-developers/p/4557487.html” UITableViewCell 有一个代码重用 减少资源的浪费 参考 https: ...
- [BZOJ2705][SDOI2012]Longge的问题 数学
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2705 首先分析得题目所求$gcd(i,N)$的取值只可能是$N$的因子,则有$$Ans=\ ...