精华内容
下载资源
问答
  • 原生事件:直接在子组件里的模板上绑定的事件,子组件引入后是可以直接触发的 当我们给一个组件绑定一个事件的时候时候,我们绑定是一个自定义事件,而这个时候我们去点击的时候并不能直接触发这个事件,因为在组件...

    自定义事件:子组件在父组件中使用时,直接绑定在子组件上的事件就是自定义事件,必须经过子组件的触发vm.$emit()才能执行
    原生事件:直接在子组件里的模板上绑定的事件,子组件引入后是可以直接触发的

    当我们给一个组件绑定一个事件的时候时候,我们绑定是一个自定义事件,而这个时候我们去点击的时候并不能直接触发这个事件,因为在组件内部并没有去emit(‘click’)这个事件。

    <template>
    	<div id="app">
    		<child-component @click="handleClick"></child-component>
    	</div>
    </template>
    <script>
    import 'ChildComponent' from './ChildComponent'
    export default {
    	name: '',
    	components: {ChildComponent},
    	data() {
    		return {}
    	},
    	methods: {
    		// 这里调用是不会触发click事件的,因为是自定义事件,不是原生的dom事件
    		handleClick() {
    			console.log('trigger click')
    		}
    	}
    }
    </script>
    

    如果想触发自定义的click事件,就得在子组件里对元素进行事件绑定,这个触发的才是原生的Dom事件。

    在dom元素上绑定的事件,触发的是dom的原生事件
    在组件上绑定的事件,触发的是自定义事件,需要用this.$emit(‘eventName’)来触发。

    Vue.component('child-component', {
    	// 组件模板自身的事件是原生dom事件,点击可以直接触发
    	template: '<div @click="handleChildClick"></div>',
    	methods: {
    		handleChildClick() {
    			console.log('触发的是dom原生事件')
    			this.$emit('click', param)
    		}
    	}
    })
    

    而如果我们想直接触发绑定的自定义事件,怎么办呢?可以这样:使用vue为我们提供的事件修饰符:.native, 即:

    <template>
    	<div id="app">
    		<child-component @click.native="handleClick"></child-component>
    	</div>
    </template>
    <script>
    import 'ChildComponent' from './ChildComponent'
    export default {
    	name: '',
    	components: {ChildComponent},
    	data() {
    		return {}
    	},
    	methods: {
    		// 在自定义事件上添加.native修饰符后,我们就可以直接触发click事件了
    		handleClick() {
    			console.log('trigger click')
    		}
    	}
    }
    </script>
    
    展开全文
  • 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

    展开全文
  • 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);}
    
    展开全文
  • 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

    展开全文
  • 昨天面试被问到一个元素同时绑定 React 合成事件DOM 原生事件的问题。首先来说,我在项目中真的没遇到过这样的场景,我也没想到要用的那些场景中。 React 合成事件 先来说说 React 合成事件是怎么回事。 React ...
  • React 事件绑定属性的命名采用驼峰式写法,事件原生事件类似, react中是on+首字母大写的事件名,例如onClick 1.普通函数绑定: <button onClick={function(){alert(‘6666’)}}>按钮1 ...
  • 在网页开发中经常会有交互操作,比如点击一个dom元素,需要让js对该操作做出相应的响应,这就需要对Dom元素进行事件绑定来进行处理,js通常有三种常用的方法进行事件绑定:在DOM元素中直接绑定;在JavaScript代码中...
  • 想要给一个html元素绑定DOM事件,我以前 肯定是用javascipt 的DOM 操作,但是既然项目用了vuejs ,我就想用vuejs实现一下,但是官方文档的这块写的非常简略,我就补充一下 解决问题: 首先需要分两种情况: 当想...
  • DOM事件大全

    千次阅读 2017-08-21 15:27:54
    IE::事件冒泡流,事件冒泡,事件从最具体的元素接收,然后逐级向上传播,主流浏览器都支持 Netscape:事件捕获流,从最不具体的节点向下逐级传播到最具体的节点 Explorer浏览器只支持冒泡事件,Mozilla,Opera7和...
  • 虚拟Dom不比原生DOM快。 没有任何框架可以比手动优化DOM更快,因为框架的DOM操作层需要应对任何上层可能产生的操作,所以他的实现需具有普适性 虚拟DOM的目的:当数据不管怎么变化,都能以最小的代价来更新DOM,在不...
  • 从虚拟DOM到原生DOM

    2020-01-13 17:38:14
    可算是看了虚拟DOM到原生DOM的过程,于是有了下图: 如有不妥,欢迎扔砖头!!!
  • NULL 博文链接:https://zl378837964.iteye.com/blog/2327825
  • 简单介绍一下DOMDOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型,例如我们写的html文件实际上是一个文档文件,通过我们的浏览器把它编译成了一...
  • 项目中,遇到react组件需要渲染原声dom的情况,记录一下。 原理是利用ref在加载完后插入元素 render(){ <div ref={(nodeElement) => { nodeElement && nodeElement.appendChild('<div>111<...
  • react合成事件DOM原生事件的区别

    千次阅读 2019-02-15 17:06:57
    DOM事件流、React中的数据流等等。 其实,流就是一种有方向的数据;事件流,是页面接受事件的顺序。 一、DOM事件流的三个阶段 1、事件捕获阶段 当某个事件触发时,文档根节点最先接受到事件,然后根据DOM树...
  • 深入理解DOM中的事件对象

    千次阅读 2016-07-15 21:23:35
    在触发DOM上的某个事件时,会在事件处理程序函数中会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。先看个例子:var btn = document...
  • jquery获取原生dom对象的方法

    千次阅读 2019-10-08 17:48:33
    使用jQuery $(selector)得到... 例如: $(’#addBookForm’) 结果为: 需要获取原生dom对象可以使用: $(selector).get(index) get() 方法获得由选择器指定的 DOM 元素。 $(selector)[0] 获取结果如下图: ...
  • vue 获取原生dom 对象

    2019-11-25 23:02:20
    通过给标签添加 ref 属性 < div id = ' app ' > < div ref = ' box ' > Hello World ...再组件中通过 this.$refs 访问到原生dom 对象 this . $refs . box this . $refs . loginForm
  • https://www.cnblogs.com/chengxs/p/11096747.html
  • 一、前言 网上都说操作真实dom怎么怎么慢,这儿有个例子:...这是引用知乎上的一个问题。觉得写的很好。文章内容主要是来源于尤大大的回答。 二、原生dom操作...
  • 原生JS我们经常使用[removed]事件来加载页面。但是[removed]是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。所以有时我们需要在DOM载入时马上执行一些函数。jQuery...
  • 仅用原生JavaScript手写DOM事件模型

    千次阅读 2016-04-29 11:35:49
    前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端面试经历,其中提到了面试官会考察手写一个简单的DOM事件模型。 “如果上述都ok的话,那么极有可能要求让你【实现事件模型】,即写一个...
  • 原生实现dom生成图片

    2020-08-29 14:44:31
    最近开发时,有遇到这么一个需求,要将一个有大量图表/文字/图片的页面导出为pdf(该页面的图表以及文字、图片是可动态配置的),目前主流的方式都是用htmlCanvas插件做的,我们一向的原则是少用插件多用原生,所以...
  • vue.js中获取原生dom对象

    千次阅读 2019-04-27 01:10:56
    获取dom元素可以使用 elementList = document.querySelectorAll(selectors);//获取多个dom元素 如ul中的li element = document.querySelector(selectors)//获取dom元素中的第一个元素 在vu...
  • 主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结,文中总结了很多的对比,相信对大家的学习或者工作能带来一定的帮助,需要的朋友可以参考借鉴,下面来一起看看吧。
  • React为了避免这类DOM事件滥用,同时屏蔽底层不同浏览器之间的事件系统差异,实现了一个中间层——SyntheticEvent。原理React中,如果需要绑定事件,我们常常在jsx中这么写:&lt;div onClick={this.onClick}&...
  • jQuery对象和原生DOM对象的相互转换

    千次阅读 2018-09-30 09:43:50
     在进行jQuery开发的时候,经常会遇到的场景是jQuery对象转换为原生的DOM对象以及原生DOM对象转换为jQuery对象。转换的方式非常简单: 原生DOM对象转jQuery对象: var box = document.getElementById('box'); var...
  • JAVA原生DOM解析XML

    千次阅读 2018-10-26 14:29:32
    DOM需要把整个XML放进内存中,如果数据量少没有什么影响,如果数据量太大,将会给服务器带来很大的负担。 下面是一个XML的实体类Linkman public class Linkman { private String id; private String name; ...
  • 原生js创建并删除dom

    2020-08-07 16:12:47
    一言不合上代码,以canvas为例: id = "canvas1... 有关删除一个dom原生js的例子,网络上充斥着一大抄: var list=document.getElementById("myList"); list.removeChild(list.childNodes[0]); 这种例子有什么意义?
  • vue中的v-on事件监听机制

    千次阅读 2019-03-10 15:51:00
    监听dom事件使用v-on指令: v-on:事件类型="一个函数" 这个事件类型可以自定义 简写: @事件类型="一个函数"⭐ 1、作用:绑定事件监听,表达式可以是一个方法的名字或一个内联语句, 如果没有修饰符也可以省略...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 84,810
精华内容 33,924
关键字:

原生dom事件