addEventListener || attachEvent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>addevent</title>
</head>
<body style="height:9000px;">
<div style="position:fixed; top:0px; left:0px;">
<div id="test"></div>
<div id="test2"></div>
</div>
<script>
    var $ = function(id){
        return document.getElementById(id);
    }
    var addEvent = function(obj,event,fn){
        if(obj.addEventListener){
            obj.addEventListener(event,fn,false);
        }else if(obj.attachEvent){
            obj.attachEvent("on"+event,fn);
        }
    }
    var scrollEvent = function(){
        var screenHeight =document.documentElement.clientHeight||document.body.clientHeight;
        var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
        $(‘test‘).innerHTML= "可视高度:" + screenHeight;
        $("test2").innerHTML= "滚动高度:" + scrollHeight;
    }
    addEvent(window,‘load‘,function(){
        scrollEvent();
    });

    addEvent(window,‘scroll‘,function(){
        scrollEvent();
    });

    addEvent(window,‘resize‘,function(){
        scrollEvent();
    });
</script>
</body>
</html>
时间: 2024-08-29 13:58:47

addEventListener || attachEvent的相关文章

javascript中addEventListener(attachEvent)详解

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture.例子如下:  <button type="button">点击我</button> <img src="11 (6).jpg" alt="" style="display:block"> <s

addEventListener attachEvent和解决IE 6 7 8 this指向错误

[JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误   电梯直达 1#  php 发表于 2014/4/13 01:17 | 只看该作者  标准浏览器中可以使用addEventListener()函数来给DOM元素绑定事件,使用removeEventListener()函数移除事件绑定,而IE6 IE7 IE8不支持addEventListener()和removeEventListener(),只能使用attachEvent()和deta

addEventListener()和attachEvent()

addEventListener(非ie浏览器.ie9及以上的浏览器使用)  添加事件监听器: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含“on”,比如“click”.“mouseover”.“keydown”等. listener :实现了 EventListener 接口或者是 JavaScript 中

前端事件

前端事件系统(一) 事件是前端之中,非常重要的一个部分.其作用在于对于用户的各种行为进行相应.近日打算对于事件系统进行更为深入的学习,同时,对于这一部分学习的内容进行一个总结.因为浏览器发展至今,事件系统本身已经尤为的复杂了,所以事件这一部分内容可能会将分为很多章来进行总结.本章将对于事件系统,根据个人的经验,以及其他地方学到的东西进行一个归纳,给出一些简单地处理方案,而在后面几章将会引入经典jquery的源码进行阅读. 绑定方式整理 事件系统发展至今,我们常见的对于事件的绑定方式有三种. 直接

jQuery源码

/*! * jQuery JavaScript Library v1.8.3 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Tue Nov 13 20

javascript绑定事件

本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type',function(){},bool) removeEventListener ('type',function(){},bool) 2)IE事件模型:仅支持事件冒泡 attachEvent('type',function(){}); detachEvent('type',fucntion(){}

JS加强学习-BOM学习04

今天主要是将事件的阶段详细讲一下,还有一些是属于事件对象的常用属性和方法. 1. 注册事件和移除事件 注册事件: addEventListener() attachEvent() 移除事件: removeEventListener() detachEvent() 注意: 需要将元素的事件移除时,需要注意移除事件的执行函数要与注册事件时的执行函数为同一个,如果注册时事件执行函数为一个匿名函数时,就算移除事件时的匿名函数内容一致也无法将事件移除,因为匿名函数每一个都是定义的新的函数,不是唯一.所有注

web项目开发 之 前端规范 --- JavaScript编码规范

JavaScript编码规范 此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 场景:web前端开发中 一些Javascript的注意事项 和 规格建议: [参考百度资料 和个人一些总结] 1 前言 JavaScript 在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使 JavaScript 代码风格保持一致,容易被理解和被维护. 虽然本文档是针对 Java

立即执行函数(IIFE)的理解与运用

作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从基础讲起,要创建一个JS函数,有两种方式. (一)函数定义(Function Declaration) function Identifier ( Parameters ){ FunctionBody } 函数定义中,参数(Parameters)标识符(Identifier )是必不可少的.如果遗漏