精华内容
下载资源
问答
  • vue访问原生 DOM 事件

    2019-10-07 13:21:06
    ... ;width: 100px;" @mouseover="over('鼠标从我上面滑过',$event)"> ... //弹出鼠标从我上面滑过,事件是[object MouseEvent] } } }) 转载于:https://www.cnblogs.com/zerohu/p/6229925.html
     <body>
            <div id="test">
                <button @click="changeColor('你好',$event)">点击我</button>
                <div style="height: 100px;width: 100px;" @mouseover="over('鼠标从我上面滑过',$event)">
                </div>
            </div>
            <script type="text/javascript">
                var myVue = new Vue({
                    el: '#test',
                    methods: {      //这里使用methods
                        changeColor: function (message, event) {
                            alert(message+event);    //弹出我被点击了,事件是[object MouseEvent]
                        },
                        over :function (message, event) {
                            alert(message+event);   //弹出鼠标从我上面滑过,事件是[object MouseEvent]
                        }
                    }
                })
            </script>
        </body>

    转载于:https://www.cnblogs.com/zerohu/p/6229925.html

    展开全文
  • Part.1 问题 如何使上面的三个按钮单个点击后实现第一个按钮现在的样式呢? Part.2 思路 为当前点击的按钮添加一个 单独的类名,我的做法: .active { background: #3C8DBC; color: white ...

    Part.1 问题

    如何使上面的三个按钮单个点击后实现第一个按钮现在的样式呢?

    Part.2 思路

       为当前点击的按钮添加一个 单独的类名,我的做法:

    .active {
        background: #3C8DBC;
        color: white
    }
    为当前点击的按钮添加一个 .active 类,但是在每次为当前点击的按钮添加类名时,其它的按钮需要删除 .active 类名才行

    Part.3 解决

    每次点击时先 remove 掉按钮的 .active 类,  然后单独给当前点击按钮添加 .active。 如何在点击时,获取当前元素信息?  vue 关键字 $event

     

     

     

    转载于:https://www.cnblogs.com/langxiyu/p/10749332.html

    展开全文
  • var addEvent = (function() { var setListener; setListener = false; return function(el, ev, fn) { if (!setListener) { if (el.addEventListener) { setList...
    var addEvent = (function() {
        var setListener;
        setListener = false;
        return function(el, ev, fn) {
          if (!setListener) {
            if (el.addEventListener) {
              setListener = function(el, ev, fn) {
                return el.addEventListener(ev, fn, false);
              };
            } else if (el.attachEvent) {
              setListener = function(el, ev, fn) {
                return el.attachEvent(ev, fn, false);
              };
            } else {
              setListener = function(el, ev, fn) {
                return el['on' + ev] = fn;
              };
            }
          }
          return setListener(el, ev, fn);
        };
      })();
    
      var fireEvent = function(element, event) {
        var evt;
    
        if (doc.createEventObject) {
          return element.fireEvent('on' + event, evt);
        } else {
          evt = document.createEvent('HTMLEvents');
          evt.initEvent(event, true, true);
          return !element.dispatchEvent(evt);
        }
      };

     

    转载于:https://www.cnblogs.com/coding4/p/6907816.html

    展开全文
  • HTML5+ - 窗口事件及原生dom事件

    千次阅读 2018-05-20 23:09:00
    详细信息 addEventListener 添加事件监听函数 ...event: ( DOMString ) 必选 要添加监听的事件类型,可取下面面列出的所有事件常量 callback: ( EventTrigCallback ) 必选 扩展API加载完毕触发的回调函数 capt...

    详细信息

    addEventListener 添加事件监听函数

    document.addEventListener( event, callback, capture );
    参数:
    event: ( DOMString ) 必选 要添加监听的事件类型,可取下面面列出的所有事件常量
    callback: ( EventTrigCallback ) 必选 扩展API加载完毕触发的回调函数
    capture: ( Boolean ) 可选 事件流捕获顺序,可忽略
    
    事件常量
    "plusready": 扩展API加载完成事件
    "pause": 运行环境从前台切换到后台事件
    "resume": 运行环境从后台切换到前台事件
    "netchange": 设备网络状态变化事件
    "newintent": 新意图事件
    "plusscrollbottom": 窗口滚动到底部事件
    "error": 页面加载错误事件
    "background": 应用切换到后台运行事件
    "foreground": 应用切换到前台运行事件
    "trimmemory": 应用需要清理内存事件
    "splashclosed": 应用启动界面已关闭事件
    

    plusready: 扩展API加载完成事件

    document.addEventListener( "plusready", plusreadyCallback, capture )
    说明:
    String 类型
    为了保证扩展API的有效调用,所有应用页面都会用到的重要事件。 
    应用页面显示时需要首先加载扩展和API代码库,当扩展API代码库加载完成时会触发pluseready事件,
    当设备触发该事件后,用户就可以安全的调用扩展API。 如果程序中打开多个页面,每个都会收到此事件。
    
    示例:
    // 扩展API加载完毕后调用onPlusReady回调函数 
    document.addEventListener( "plusready", onPlusReady, false ); 
    function onPlusReady() {
       // 扩展API加载完毕,现在可以正常调用扩展API
    }
    

    pause: 运行环境从前台切换到后台事件

     document.addEventListener( "pause", pauseCallback, capture );
    当程序从前台切换到后台时会触发此事件。 若应用需要处理从前台切换到后台的事件行为,
    可通过注册事件监听器来监听“pause”事件,此事件需要在plusready事件后通过document进行注册。
    mui.plusReady(function(){
        document.addEventListener('pause',function(){
            mui.toast('app 在后端运行');
        },false)
    });
    

    resume: 运行环境从后台切换到前台事件

    document.addEventListener( "resume", resumeCallback, capture );
    mui.plusReady(function(){
    	document.addEventListener('pause',function(){
    		mui.toast('app 在后端运行');
    	},false);
    	document.addEventListener('resume',function(){
    		mui.toast('app 在前端端运行');
    	},false)
    });
    

    netchange:设备网络状态变化事件

    document.addEventListener("netchange", netchangeCallback, capture);
    String 类型
    设备网络状态发生时会触发此事件。 若应用需要处理网络状态变化的事件行为,
    可通过注册事件监听器来监听“netchange”事件,此事件需要在plusready事件后通过document进行注册
    // 扩展API加载完毕后调用onPlusReady回调函数 
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    	document.addEventListener("netchange", onNetChange, false);  
    }
    function onNetChange(){
    	var nt = plus.networkinfo.getCurrentType();
    	switch (nt){
    		case plus.networkinfo.CONNECTION_ETHERNET:
    		case plus.networkinfo.CONNECTION_WIFI:
    		alert(); 
    		break; 
    		case plus.networkinfo.CONNECTION_CELL2G:
    		case plus.networkinfo.CONNECTION_CELL3G:
    		case plus.networkinfo.CONNECTION_CELL4G:
    		alert();  
    		break; 
    		default:
    		alert(); 
    		break;
    	}
    }
    

    newintent:新意图事件

    document.addEventListener("newintent", newintentCallback, capture);
    String 类型
    程序从后台被第三方程序调用并传入新意图事件。 此时程序将切换到前台运行,若应用需要处理新意图的事件行为,
    可通过注册事件监听器来监听“newintent”事件,此事件需要在plusready事件后通过document进行注册。
    // 扩展API加载完毕后调用onPlusReady回调函数
    document.addEventListener("plusready", onPlusReady, false);
    function onPlusReady(){
    	document.addEventListener("newintent", onNetIntent, false);
    }
    function onNetIntent(){
    	// 获取新意图传入的参数
    	var args = plus.runtime.arguments;
    	// 处理意图事件
    }
    

    plusscrollbottom: 窗口滚动到底部事件

    document.addEventListener( "plusscrollbottom", eventCallback, capture );
    当滚动Webview窗口到底部时触发此事件。
    mui.plusReady(function(){
        document.addEventListener( "plusscrollbottom", onScrollToBottom, false );
        function onScrollToBottom() {
            mui.toast('窗口滚动到底部');
        }
    });
    

    background:应用切换到后台运行事件

    document.addEventListener("background", backgroundCallback, capture);
    String 类型
    在多应用运行环境(如流应用)中,启动一个新应用时,之前运行的应用将会自动切换到后台运行。 切换到后台运行的应用将会触发此事件。
    // 扩展API加载完毕后调用onPlusReady回调函数 
    document.addEventListener("plusready", onPlusReady, false); 
    function onPlusReady(){
    	document.addEventListener("background", onAppBackground, false);
    }
    function onAppBackground(){
    	console.log("Application background!"); 
    }
    

    foreground:应用切换到前台运行事件

    document.addEventListener("foreground", foregroundCallback, capture);
    String 类型
    在多应用运行环境(如流应用)中,应用切换到后台运行后再次被启动时,不会创建新的应用实例,而是将后台应用激活到前台运行。
    此时切换到前台运行的应用将会触发foreground事件。 回调函数原型为void onForeground(e){}其中e.active表明激活应用到
    前台来源,可取值:"default"-默认激活方式,通常表示通过应用列表启动激活,或者关闭前一个应用后自动激活等;"stream"-通
    过流应用api(plus.stream.open)激活;"scheme"-通过urlscheme方式触发激活; "push"-通过点击系统通知方式触发激活;
     "barcode"-通过二维码扫描激活; "myapp"-通过应用收藏列表([流应用]独立App中"我的"列表)触发激活。
     // 扩展API加载完毕后调用onPlusReady回调函数 
    document.addEventListener("plusready", onPlusReady, false); 
    function onPlusReady(){
    	document.addEventListener("foreground", onAppForeground, false);
    }
    function onAppForeground(e){
    	console.log("Application foreground!");
    	var activeType = e.active;	// 获取激活到前台来源
    }
    

    trimmemory:应用需要清理内存事件

    document.addEventListener("trimmemory", trimmemoryCallback, capture);
    String 类型
    在多应用运行环境(如流应用)中,可同时运行多个应用,当运行过多应用时会导致内存占用过多的情况,此时切换到后台
    运行的应用会收到清理内存事件。 此时应用应该释放资源来减少内存的使用(如关闭非必要的Webview窗口等)。
    // 扩展API加载完毕后调用onPlusReady回调函数 
    document.addEventListener("plusready", onPlusReady, false); 
    function onPlusReady(){
    	document.addEventListener("trimmemory", onAppTrimMemory, false);
    }
    function onAppTrimMemory(){
    	console.log("Trim Memory!"); 
    }
    

    splashclosed:应用启动界面已关闭事件

    document.addEventListener("splashclosed", splashClosedCallback, capture);
    String 类型
    应用启动后关闭启动界面时触发,不管是应用自动关闭还是调用plus.navigator.closeSplashscreen方法,都会触发此事件。
    // 扩展API加载完毕后调用onPlusReady回调函数 
    document.addEventListener("plusready", onPlusReady, false); 
    function onPlusReady(){
    	document.addEventListener("splashclosed", onSplashClosed, false);
    }
    function onSplashClosed(){
    	console.log("Splash closed!"); 
    }
    

    原生dom事件

    1、利用dom元素的 onclick="" 属性
    <input type="button" id="btn" value="test" onclick="test();"></input>
    //js代码
    function test(){alert(1);}
    
    2、获取dom对象,从写dom元素的 onclick 方法
    <input type="button" id="btn" value="test"></input>
    //js代码
    document.addEventListener('plusready', function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){alert(1);}
    });
    
    3、a 元素的href属性
    <a href="javascript:test();">test</a>
    //js代码
    function test(){alert(1);}
    
    展开全文
  • 需求很简单(天真的想法),稍微理清下思路:多媒体文件插入之后,获取dom内所有的多媒体元素循环给他们添加事件,在添加事件前,remove掉之前的事件当任何一个元素点击之后,遍历多媒体文件列表,如何不是自己,...
  • 今天写代码时使用了一下jQuery的事件监听,于是与原生DOM操作进行了比较,特别是event对象和this的指向两者之间的异同。 复制代码为什么进行比较为什么我要抠这个细节?主要是避免使用时不至于混淆this或event.target...
  • 原生dom绑定多个事件 document.body.addEventListener(‘click’, () => { Promise.resolve().then(()=>console.log(1)); console.log(2) }); document.body.addEventListener(‘click’, () => { Promise....
  • 想要给一个html元素绑定DOM事件,我以前 肯定是用javascipt 的DOM 操作,但是既然项目用了vuejs ,我就想用vuejs实现一下,但是官方文档的这块写的非常简略,我就补充一下 解决问题: 首先需要分两种情况: 当想...
  • 原生js之DOM事件相关

    2018-01-16 03:13:35
    前端学习的东西有很多,现代前端开发,前端工程化的东西要懂,基础的原生js也要懂,毕竟,框架都是有生命周期的,更替非常快,然而却有这么一个框架,它是最轻量的前端框架,每个浏览器都内置,它叫vanilla.js。...
  • 昨天面试被问到一个元素同时绑定 React 合成事件DOM 原生事件的问题。首先来说,我在项目中真的没遇到过这样的场景,我也没想到要用的那些场景中。 React 合成事件 先来说说 React 合成事件是怎么回事。 React ...
  • 仅用原生JavaScript手写DOM事件模型

    千次阅读 2016-04-29 11:35:49
    前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端面试经历,其中提到了面试官会考察手写一个简单的DOM事件模型。 “如果上述都ok的话,那么极有可能要求让你【实现事件模型】,即写一个...
  • DOM事件流、React中的数据流等等。 其实,流就是一种有方向的数据;事件流,是页面接受事件的顺序。 一、DOM事件流的三个阶段 1、事件捕获阶段 当某个事件触发时,文档根节点最先接受到事件,然后根据DOM树结构向...
  • React为了避免这类DOM事件滥用,同时屏蔽底层不同浏览器之间的事件系统差异,实现了一个中间层——SyntheticEvent。 原理 React中,如果需要绑定事件,我们常常在jsx中这么写: &lt;div onCl...
  • React 事件绑定属性的命名采用驼峰式写法,事件原生事件类似, react中是on+首字母大写的事件名,例如onClick 1.普通函数绑定: <button onClick={function(){alert(‘6666’)}}>按钮1 ...
  • 在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定;在JavaScript代码中...
  • 文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本【2.5.17】这里的绑定DOM事件,是指绑定原生标签的DOM 事件因为组件也是可以绑定原生DOM事件的,...
  • Js原生DOM轮播图

    2020-07-27 01:42:44
    DOM 4步 1.查找触发事件的元素 2.绑定事件处理函数 3.查找要修改的元素 4.修改元素 结构 div#banner-container(主框) ul#banner-wrapper>li>a>img(图片内容) banner-btn-left,banner-btn-right ul#banner-...
  • React为了避免这类DOM事件滥用,同时屏蔽底层不同浏览器之间的事件系统差异,实现了一个中间层——SyntheticEvent。原理React中,如果需要绑定事件,我们常常在jsx中这么写:&lt;div onClick={this.onClick}&...
  • 1.如果你在已经写好的项目中 要添加轮播图的话 建议还是使用原生dom进行书写轮播图 移动端和pc端的区别就是 移动端 是需要用手指进行滑动的 移动端的事件就不想再这里一一赘述了 当然 你要是重新开始写项目的话 ...
  • DOM事件: 交互网页,JS通过事件监听(捕获事件),事件处理,事件冒泡完成。简单点你可以理解DOM操作就是一套JS操作HTML元素的API。 事件冒泡:具体一个发出事件的元素往上(父级元素)传,至document文档...
  • 首先要知道js中有dom0级和dom2级事件这两种;其次要知道这两种事件的区别。 dom0级==》执行过程,若同一个元素执行多个相同的事件,他会进行一个覆盖,只执行最后一个事件,这在开发中有一些业务很难用dom0级来完成...
  • 文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本【2.5.17】这里的绑定DOM事件,是指绑定原生标签的DOM 事件因为组件也是可以绑定原生DOM事件的,...
  • js原生方法获取不到dom,无法添加事件 原因是要获取的dom元素有v-if判断,在加载的时候判断还未执行所以无法获取 建议将v-if换做v-show 如果不想换v-if,可以在获取dom元素的方法前加一个延时器也可以获取 ...
  • React 事件Dom 事件

    2019-01-12 08:11:13
    注意:Chrome 中打印的对象展开的时候显示的是当前对象的值,可能已经不是打印的时候的值了,所以需要通过在打印的地方打断点的形式来查看准确的值...原生dom 事件 click 事件和 href 的优先级: click >>&...
  • js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.addEventListener('DOMAttrModified',function(){alert(1)},false);document.addEventListener...
  • 自定义DOM事件函数封装 非原生DOM触发,个性化定制的自定义事件。 currentTarget(DOM对象):要触发事件的元素节点。 type(字符串):触发的事件类型,例如"keydown"。 bubbles(布尔值):表示...
  • 原生事件的句柄 :dom 节点对象固有的事件,比如:onclick,onmouseover,onkeyup.......如此种种. 自定义事件句柄 :和原生事件类同,区别在于事件句柄可以自己取名(自定义嘛),比如:test,mytest........
  • 浏览器原生 DOM 事件的传播可以分为 3 个阶段:事件捕获阶段、目标对象在这里插入代码片本身的事件处理 程序调用以及事件冒泡。 事件捕获会优先调用结构树最外层的元素上绑定的事件监听器,然后依 次向内调用,一直...
  • jQuery的DOM事件总结

    千次阅读 2016-07-17 16:31:51
    一 摘要在这里,不管你学过还是没学过,给大家总结一下jQuery的DOM事件操作.二 具体内容1. js页面载入事件(原生方式)第一种内嵌写法:第二种以匿名函数方式写法2. jQuery页面载入事件第一种写法:第二种写法:第三种写法3...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,376
精华内容 550
关键字:

原生dom事件