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('你点击了这个按钮'); ...
随机推荐
- bzoj 1060: [ZJOI2007]时态同步【树形dp】
可能算不上dp,大概是个树形模拟 先一遍dfs算出f[u]为每个点最深的叶子到u的距离,然后再dfs一下,ans加上f[u]-f[e[i].to]-e[i].va,f[u]-f[e[i].to]是这条 ...
- Nginx系列篇三：linux中Nginx+keepalived做一个高可用的主从配置
建议:先阅读搭建Nginx负载均衡之后再看此篇 备注: Nginx+keepalived的高可用有两种方式 一.主从配置 二.双主热备配置[下一篇] 准备: 标配四台服务器 Master:192.16 ...
- bzoj 4456 [Zjoi2016]旅行者
题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4456 题解 分治 设当前work的区间为(x1,y1,x2,y2) 我们将长边分成两半 不妨 ...
- 洛谷 P4585 [FJOI2015]火星商店问题
(勿看,仅作笔记) bzoj权限题... https://www.luogu.org/problemnew/show/P4585 对于特殊商品,直接可持久化trie处理一下即可 剩下的,想了一段时间c ...
- usb被占用时，可以用这些方法进行adb无线调试
转自: http://www.cnblogs.com/shangdawei/p/4480278.html 可用wifi.网口. 1.先要获取root权限 如果手机没有命令行工具,请先在手机端安装终端模 ...
- 转 PHP scandir() 函数
实例 列出 images 目录中的文件和目录: <?php $dir = "/images/"; // 以升序排序 - 默认 $a = scandir($dir); // 以 ...
- sql server group by 分组带sum avg求和需要注意的一点
这是在写SQL语句遇到的一个sum 和group bu分组的问题
- Git之master ->! [rejected] master (non-fast-forward)
出现这个情况可能是在克隆项目的时候强制关闭或者是在pull的时候强制关闭 运行命令:git pull --rebase origin master 然后就可以 git push origin mast ...
- ios 微信环境 axios请求 status 0
做了一个支付页面,调用post请求但是请求status 0,出现这个的原因居然是https的网页请求http的数据. 但是这个再ios里面不会报错,安卓正常. 记录一下客户端的这个特征!
- 用vue做一个酷炫的menu
写在前面 最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱