封装事件框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<button id="btn">按钮</button>
<div id=‘div‘></div>
</body>
<script src=‘itcast.js‘></script>
<script type="text/javascript">

    //测试
    $$.event.click(‘btn‘, function(){
        document.getElementsByTagName(‘div‘)[0].style.background = ‘green‘
    });

    $$.event.mouseover(‘div‘, function(){
        this.style.background = ‘blue‘
    });

    $$.event.mouseout(‘div‘, function(){
        this.style.background = ‘pink‘
    });

</script>
</html>

使用 extend 改造

$$.hover(‘div‘ , function(){ } , function(){ } ) ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<button id="btn">按钮</button>
<div id=‘div‘></div>
</body>
<script src=‘itcast2.js‘></script>
<script type="text/javascript">

    //测试
    $$.click(‘btn‘, function(){
        document.getElementsByTagName(‘div‘)[0].style.background = ‘green‘
    });

    $$.hover(‘div‘, function(){
        this.style.background = ‘blue‘
    },function(){
        this.style.background = ‘pink‘
    });

</script>
</html>

原文地址：https://www.cnblogs.com/shanlu0000/p/11605191.html

时间： 2024-10-24 01:19:56

封装事件框架的相关文章

封装运动框架单个属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>封装运动框架的单个属性</title> <style> div{ width: 100px; height: 100px; font-weight:bold;">pink; position: absolute; left: 10px

在前两天已经封装了框架的选择器模块的函数了,在这里为了保持代码的完整性,以及体现框架模块的功能.这里用一个h5的方法,简单表示选择器模块. 1 (function(window){ //传入window全局对象,可以减少作用域的访问深度 2 //1.选择器模块 3 var select = (function () { 4 return function (selector, context) { 5 if (context) { 6 return context.querySelectorAl

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

三维引擎设计-多线程渲染（平台API基础和封装大致框架）

第一部分: Linux线程API基础一:线程创建与结束 (1)pthread_t //线程的标识符类型 (2)pthread_create //用来创建一个线程, 参数线程标识符, 线程属性, 线程运行函数地址 (3)pthread_join //用来等待一个线程的结束, 参数被等待线程标识符,用户自定义指针 (4)pthread_exit //线程非正常结束,参数线程返回代码二:修改线程属性 (1)pthread_attr_t //线程属性结构类型 (2)pthread_attr_init

JS 封装事件（鼠标事件举例）

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 p{ 9 width:200px; 10 margin: 0 auto; 11 } 12 </style> 13 </head> 14 <

(转)AS3 事件框架- Signals篇

这篇文章详细的介绍了Robert Penner的AS3 Signals是什么,以及如何使用它让对象间的沟通更迅捷.它可以避免你使用常规的ActionScript事件机制,用到的代码量更少.我们将通过范例来了解不同类型的signals,从而向大家描绘出如何在实际项目中应用signals.我希望你会和我一样,喜欢上AS3 Signals带来的对象沟通方便的感觉.其中一个裨益就是Signals非常容易掌握应用.你将很快实现它,它也会带来更多的便捷.那么我们开始吧!如果你想亲历亲为,也是不错的主意,可以

各种封装----move框架

运动框架 html <div id="div1"></div> js: window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onclick=function(){ move(oDiv,{left:300}); }; }; 使用:move() function move(obj, json, options){ options=options || {}; v

JS 封装事件（鼠标事件举例）-封装引入部分

function addScrollEvent(obj,handle){ //obj代表的是将来调用函数时,传递的标签 //先判断是不是火狐 var isFF = navigator.userAgent.indexOf("Firefox"); if(isFF != -1){ obj.addEventListener("DOMMouseScroll",scrollfun,false); }else{ obj.onmousewheel = scrollFun; } //

一个简单的前端事件框架

参考网上的一个资料,做下备注. <html> <head> <title>js event demo</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv=&