js 事件
事件：一般用于浏览器与用户操作进行交互
js事件的三种模型：内联模型、脚本模型、DOM2模型
内联模型：事件处理函数是HTML标签的属性
<input type="button" value="点击" onclick="test()" />
脚本模型：事件处理函数谢谢脚本中从而达到层次分离的原则
document.onclick=function(){ //处理逻辑 }
DOM2模型：
一、如何获得事件函数
function testEvt(){
var len=arguments.length;//获得参数个数
//实际上我们并没有传参 len=1 是应为在事件处理函数中，浏览器会默认传递一个参数 这个参数是事件对象(event)
var arg=arguments[0];//获得这个事件对象event
}
//获得事件对象的兼容写法 （ 参数evt也可以写成event）
function getEvt(evt){
var e=evt || window.event;// window.event IE的规范
return e;
}
二、事件切换机制
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件切换机制demo</title>
<style type="text/css">
.red{
width: 100px;
height: 100px;
background: red;
}
.blue{
width: 100px;
height: 100px;
background: blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("div");
div.onclick=onBlue;//1、把onBlue函数付给当前事件 this：是当前点击的对象
/*
div.onclick=function(){ //通过匿名函数执行的事件 this：是window
alert(this);
}
*/
}
function onRed(){
this.className="red";
this.onclick=onBlue;//3、把onBlue函数赋给当前事件
}
function onBlue(){
this.className="blue";
this.onclick=onRed;//2、把onRed函数赋给当前事件
}
</script>
</head>
<body>
<div id="div" class="red">事件切换</div>
</body>
</html>
js 事件的更多相关文章
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
- 原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
- 特殊js事件
1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...
随机推荐
- Mvc模板页
以前学过WEB的应该都知道母版页这个东西,在这里呢,mvc的模板页和WEB中的模板页也是一样的效果和用途. 首先:创建一个项目,控制器,生成Index视图,在生成视图的时候我们选择Razor视图引擎, ...
- 安卓奇葩问题之SQLite条件查找不到数据
今天真是日了狗了. 先说需求:要做一个累死支付宝首页的可自定义的栏目.栏目是动态从后台获取的,所以就会有一个本地数据和后台数据的同步问题.为了方便对本地数据的增删改查,首先想到SQLite. 然后就写 ...
- [转载]Firebird与MySQL:一个使用者的体会
老板要我开发一个LINUX平台上的数据库项目,要求一定要用开源免费数据库.我知道这个数据库必须能够上网操作,同时作为公司的核心骨干数据库,除了必须是稳定的存储数据库外还必须有很强的数据和数据库控管功能 ...
- 找一个四位数，要求该四位数的四倍刚好是该四位数的反序。 即b1b2b3b4 * 4 = b4b3b2b1
找一个四位数,要求该四位数的四倍刚好是该四位数的反序. 即b1b2b3b4 * 4 = b4b3b2b1 解: 第一步,确认最末位 假设 b1b2b3b4 + b4b3b2b1 = [x0]x1x2x ...
- Microsoft.Office.Interop.Excel 程序集引用 ，Microsoft.Office.Interop.Excel.ApplicationClass 无法嵌入互操作类型
using Microsoft.Office.Interop.Excel 添加程序集引用 方法:在引用--程序集--扩展中,添加引用Microsoft.Office.Interop.Excel,此 ...
- 模板短信接口调用java,pythoy版（二） 阿里大于
说明 功能:短信通知发送 + 短信发送记录查询,所有参数我没有改动,实测有效! 请自行参考 + 官方API! 短信模板示例:尊敬的${name},您的快递已在飞奔的路上,将在今天${time}送达您的 ...
- angular中的 ng-change
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- quick cocos2d-x 入门---井字棋
学习quick cocos2d-x 第二天 ,使用quick-x 做了一个井字棋游戏 . 我假设读者已经 http://wiki.quick-x.com/doku.php?id=zh_cn阅读了这个链 ...
- C++ 非阻塞套接字的使用 (2)
继续话题——软件中的异步非阻塞通讯方式. 由于软件基于MFC开发,所以实现异步通讯时使用了CAsyncSocket类. 首先要了解CAsyncSocket异步机制,引用自 http://blog.cs ...
- TCP Fast Open
We know that Web services use the TCP protocol at the transport layer. Standard TCP protocol to thre ...