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('你点击了这个按钮'); ...
随机推荐
- 两年Java程序员面试经验分享，从简历制作到面试总结！
前言 工作两年左右,实习一年左右,正式工作一年左右,其实挺尴尬的,高不成低不就.因此在面试许多公司,找到了目前最适合自己的公司之后.于是做一个关于面试的总结.希望能够给那些依旧在找工作的同学提供帮助. ...
- IT兄弟连 JavaWeb教程 经典案例3
案例需求:写一个用户登录的html页面有账号和密码,并在登录的Servlet中获取登录的账号和密码,如果账号是abc密码是123则重定向到main.html,否则重定向到login.html. 案例实 ...
- NOIp 2015 Day1T3斗地主【搜索】
题目传送门 昨天真题测试赛题目== 没想到一道纯到都不用剪枝的搜索会是noipT3难度. 不过因为我搜索弱啊所以打不出来== LA:这不就是一道简单模拟题么 码完此题能增加对搜索的理解== (闲话结束 ...
- 递推DP HDOJ 5092 Seam Carving
题目传送门 /* 题意:从上到下,找最短路径,并输出路径 DP:类似数塔问题,上一行的三个方向更新dp,路径输出是关键 */ #include <cstdio> #include < ...
- 第05课 Linux命令初探（一）
该篇为第一部分,主要介绍的Linux指令有: mkdir.cd.ls.rm.touch.vi/vim.echo.cat.cp.mv.pwd.rm.rmdir 1.创建一个目录/data 提示:Wind ...
- java 反向工具类
1.ReflectUtil.java package com.example.scansell; import android.util.Log; import java.lang.reflect.C ...
- NTP服务简介
定义:NTP全称为Network Time Protocol,即网络时间协议.是用来使计算机时间同步的一种协议.它可以使计算机对服务器或时钟源做同步,可以提供高精度的时间校正(LAN 上与标准时间小于 ...
- android开发学习 ------- Error:Failed to open zip file.
我们用Android Studio Sync Project项目的时候,会出现如下的错误: 解决方案: Project视图下, 这块 https 改为 http 就可以了.
- CCF|火车购票|Java|80分
import java.util.*; public class Main { public static void main(String[] args) { Scanner in = new Sc ...
- Hibernate核心接口和工作原理
Hibernate核心接口和工作原理 Hibernate有五大核心接口,分别是:Session .Transaction .Query .SessionFactory .Configuration . ...