事件:一般用于浏览器与用户操作进行交互

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 事件的更多相关文章

  1. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  2. 什么是JS事件冒泡?

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...

  3. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  4. js事件浅析

    js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...

  5. js 事件大全

    Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...

  6. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  7. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  8. 原生js事件和jquery事件的执行顺序问题

    场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...

  9. 特殊js事件

    1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...

随机推荐

  1. python中zipfile文件名编码的问题

    在python中编程导入压缩包,利用zipfile包,从zipinfo读取文件名总是出错,创建的文件名是乱码,写入pgsql更是出错. 但在ubuntu下测试却正常,在windows下测试总是失败. ...

  2. elasticsearch-查询

    使用如下语句创建一个名字为:user_document,别名为user的索引 PUT:http://localhost:9200/user_document { "settings" ...

  3. UI进阶

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  4. CAD规划成果入库GIS_SDE转换之分析

    问题: 1) 项目应用中要求将CAD规划成果合理的入库GIS SDE中,在建立一套比较规范的标准为前提下,如何“低技术.傻瓜式”实现规划数据更新管理.版本化是个迫切难题. 2) CAD作为数据源,不同 ...

  5. iOS 字符串转son  json转字符串

    + (NSString*)dictionaryToJson:(NSDictionary *)dic {     NSError *parseError = nil;    NSData *jsonDa ...

  6. 数据分析和R语言的那点事儿_1

    最近遇到一些程序员同学向我了解R语言,有些更是想转行做数据分析,故开始学习R或者Python之类的语言.在有其他编程语言的背景下,学习R的语法的确是一件十分简单的事.霸特,如果以为仅仅是这样的话那就图 ...

  7. 初学python第二天

    今天我将用python来编写一款小游戏,用这个来总结一下自己学过的一些基础语法.没错,它就是井字游戏.想想自己第一接触这种游戏,还是小学生呢

  8. MacBook 配置

    转载 http://www.cnblogs.com/linl/p/4035685.html cordova3.X的部署和环境搭建教程   针对cordova3.0,至现在的3.6都能用. 一.准备工作 ...

  9. 【原创】--linux平台下opencv安装

    1.到opencv官网下载源码 也可以下载此链接http://pan.baidu.com/s/1mgId5ZM 2.解压到任意目录 可以使用右键-提取到此处,也可以在命令行中使用指令解压(linux中 ...

  10. Hibernate component mapping

    A Component is a containted object that is be persisted value type and not an entity.But you can emb ...