1. 1,事件对象
  1.  
  1. e || window.event //ie
  1.  
  1. 2, 取鼠标点击坐标 带有滚动条的
  1.  
  1. var top = document.documentElement.scrollTop || document.body.scrollTop;//chorme
  1. var x = top + e.clientX; //可视区坐标
  1.  
  1. 3, 获取屏幕坐标
  1. e.screenX e.screenY
  1.  
  1. 4, shiftKey altKey ctrlkey
  1.  
  1. 5,onkeydown/onkeyup keyCode 返回的是ASCII 不区分大小写
  1.  
  1. 6,onkeypress
  1. ff 返回keycode 所有的字符都返回0
  1. chorom/ie 返回keycode 支持大小写
  1. charCode 返回字符编码
  1.  
  1.  
  1. 7 获取事件源
  1. target = e.target || e.srcElement
  1. target.tagName
  1. e.type
  1.  
  1. 8, 事件流
  1.  
  1. ff 先捕获然后再冒泡
  1. ie 冒泡
  1.  
  1. 9 取消冒泡
  1.  
  1. e.stopPropagation() || e.cancelBubble = true;
  1.  
  1. 10, addEventListener
  1.  
  1. 1,解决调用两次,不会被覆盖 ie倒着弹出)
  1. window.addEventListener('load',function(){
  1. alert('lv');
  1. },false);
  1.  
  1.  
  1. window.addEventListener('load',function(){
  1. alert('Miss.lv');
  1. },false);
  1.  
  1.  
  1. ff lv Miss.lv
  1.  
  1. ie Miss.lv lv
  1. 2,解决传递两个相同的函数,只执行一次(ie没有解决,传递相同的两个函数)
  1.  
  1. window.addEventListener('load',init,false);
  1. window.addEventListener('load',init,false);
  1.  
  1.  
  1. 3this指向 ie this 指向window
  1. window.attachEvent('load',function(){
  1. var box = document.getElementById('box');
  1.  
  1. box.attachEvent('onclick',function(){
  1. alert(this===window); //true
  1. })
  1. })
  1.  
  1.  
  1.  
  1. function addEvent(obj,type, fn){
  1. obj.attachEvent('on'+type, function(){
  1. fn.call(obj,arguments);
  1. })
  1. }
  1.  
  1. addEvent(window,'load',function(){
  1. var box = document.getElementById('box');
  1. addEvent(box,'click',function(){
  1. alert(this === box);
  1. })
  1. })
  1.  
  1.  
  1. 4,添加一个额外的方法,不会不覆盖
  1.  
  1.  
  1. 11 移入 e.ralatedTarget e.fromElement mouseover
  1. 移出 e.ralatedTarget e.toElement mouseout
  1.  
  1. 12, 阻止默认行为
  1.  
  1. e.preventDefault();
  1. e.returnValue = false;
  1.  
  1.  
  1. 不能直接用return false;因为return false只能放到前面,后面的就不能执行了
  1.  
  1.  
  1. 13 滚轮事件
  1.  
  1. ff mousewheel
  1. ff DOMMouseScroll
  1.  
  1.  
  1. wD : function(e){
  1. var e = this.getEvent(e);
  1. if(e.wheelDelta){
  1. return e.wheelDelta;
  1. }else{
  1. return -e.detail*40;
  1. }
  1. }
  1.  
  1.  
  1.  
  1.  
  1.  

js 事件小结的更多相关文章

  1. js事件小结

    首先事件绑定分为2种方法 一种为"DOM0级"方法,这里我理解为事件指定 var oDiv = document.getElementById("div1"); ...

  2. 深入浅出js事件

    深入浅出js事件 一.事件流 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> & ...

  3. 一文梳理JS事件

    JavaScript与HTML的交互是通过事件进行的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间. 事件流 事件捕获 事件冒泡 事件处理程序 事件委托 1. 事件流 如果单机页面上的某个按钮, ...

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

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

  5. 什么是JS事件冒泡?

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

  6. js事件技巧方法整合

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

  7. js事件浅析

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

  8. js 事件大全

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

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

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

随机推荐

  1. windows安装Apache HTTP服务器报错:无法启动,因为应用程序的并行配置不正确

    Apache HTTP服务器安装后报:无法启动,因为应用程序的并行配置不正确-(已解决)   0条评论 [摘要:本创做品,出自 “深蓝的blog” 专客,迎接转载,转载时请务必说明出处,不然有权穷究版 ...

  2. js 16进制字符串互转

    /** * 16进制转换为字符串 * @param hex * @returns {*} */ function hexToString(hex) { var tmp = ''; if (hex.le ...

  3. php 简单分页

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 10步教你来优化WordPress速度 为服务器和访客减压

    1.Cookie的静态化制作 约有80%至90%的时间,访客要花费大量的时间等你的WordPress加载静态内容.这意味着,有大部分的时间,用户浏览您的网站,他们正在等待加载,如:图像,CSS,JS脚 ...

  5. 一键分享到新浪微博、腾讯微博、搜狐微博、人人网、开心网、百度收藏等js代码大全

    下面给大家一些分享的js代码,只要把代码插入自己的网页中稍微修改一下图片路径就可以用了,好了,废话少说,上代码:  document.writeln("<b>喜欢本文,那就分享到 ...

  6. Python入门学习之input()与raw_input()的区别

    登陆博客时才发现已经注册一年了,由于之前一直都没有打算从事软件开发行业,所以博客便被束之高阁,软件开发,对于我来说,是成长,更是磨炼.头脑风暴总是来去自由,记录灵感,与大家一起共享思维进步的成果. P ...

  7. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. key转成pvf

    https://www.godaddy.com/help/converting-an-exported-pfx-code-signing-file-to-pvk-and-spc-files-using ...

  9. Linux文件夹执行权限

    在Linux中,文件有三种权限--可读,可写,可执行.目录也有三种权限--可读,可写,可执行.但是实际上他们有着不同的意义. 对于文件: 可读 :表示可以读取文件里的数据: 可写 :表示可以改变和删除 ...

  10. Apache RewriteRule QSA 什么意思

    看到下面这段代码: RewriteCond %{REQUEST_FILENAME} !-l RewriteRule ^(.+)$ index.php?url=$1 [QSA,L] The Rewrit ...