原生js--事件类型 - 相关文章

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

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的通过以上这种方式进行事件函数的绑定有个缺点就是…

原生js事件和jquery事件的执行顺序问题

场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦点进行一些一些逻辑操作. 思路一:改写插件,使用回调函数或初始化函数. 原来的插件并没有使用回调函数或初始化函数.可以改写插件,增加回调函数或初始化函数,视情况,在原来逻辑执行之前或之后先执行逻辑操作. 思路二:使用原生js事件. 开始的时候并没有这个思路,但是由于原生js事件函数onfocus()…

移动终端学习2：触屏原生js事件及重力感应

如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增加到 51.1%:2014年中国智能手机用户已超过5亿,2018年将超过7亿) 1. 触屏手势随着大屏幕时代的到来,物理键盘逐渐退化,只剩下今天可见的 home 或 return 等少数按键.大部分的手机操控都依赖触屏完成. 现在触屏操作主要依靠电容式触摸屏传感器,可以实现多点触控.触屏手势参考如…

原生js事件委托（事件代理）方法扩展

原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param sub {string}: 子节点选择器,如'.sub-item' * @param fn {function}: 事件回调方法 * @eg var ctn = document.querySelector('#menu_container'); * ctn.delegate('click','.…

原生js事件绑定

一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup②keypress只能捕获数字,字母,符号键,而不能捕…

JS事件类型--1

滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和clientY属性中.所有浏览器都支持者两个属性.clientX和clientY表示事件发生时鼠标指针在视口中的水平和垂直坐标. document.addEventListener('click',function(event){ document.title=event.clientX+' , '+…

screen,client,page三种确定鼠标坐标的区别和原生JS事件写法，区别于Jquery的$.on(x,y);和$.click()

screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 JS原生事件的写法 ① document.onclick = function(){ alert(1); //只要是点击页面的任何一个地方,…

JS事件类型详解

一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4.…

原生js事件的添加和删除

在IE浏览器中添加或删除事件用attachEvent.detachEvent.在其他标准浏览器中则用addEventListener.removeEventListener.下面的对事件的添加和删除做了封装.直接看代码吧! /** * @description 事件绑定,兼容各浏览器 * @param target * 事件触发对象 * @param type * 事件 * @param func * 事件处理函数 */ function bind(target, type, func) { i…

兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>测试事件绑定函数</title> <scrip…

原生js事件委托

var commontop = document.getElementById("commontop");commontop.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.className.toLowerCase() == "h5navbox"){ if(h5navcontent.s…

原生JavaScript事件详解

JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低. 小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一下了. 首先声明,小菜懂的也不是很多,只是把我的思路和大家分享一下. DOM0事件模型事件模型在不断发展,早期的事件模型称为DOM0级别. DOM0事件模型,所有的浏览器都支持. 直接在dom对象上注册事件名称,就是DOM0写法,比如: document.getElementById("test&…

原生js实现滚动条

var SimulateScroll = (function(){ var oParent = document.getElementById('wrap-scroll-bar'), oBox = document.getElementById('scroll-bar'), oWp = document.getElementById('container'), oDiv = document.getElementById('cont'), bDown = true, downFun = func…

JQuery&原生js ——实现剪刀石头布小游戏

前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 上一篇博客中,小编给大家展示了jQuery的一大优势,自定义插件.相信这个功能让各位都跃跃欲试,…

通过游戏认识 --- JQuery与原生JS的差异

前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 今天,影子就通过一个小游戏,剪刀石头布,来给大家介绍下,两者之间的区别. 1.原生JS实现游…

React事件处理和原生JS事件处理

1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发 ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElement.click()模拟触发 3. addEventListener监听事件,手动触发 this指向如果onevent事件属性定义的时候将this作为参数,在函数中获取到该参数是DOM对象.用该方法可以获取当前DOM. 在方法中直接访问this, this指向当前函数所在的作用域.或者说调用函数的对…

JS DOM属性+JS事件

DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 ele.attributes[attr].nodeValue 获取指定属性值 ele.attributes.removeNamedItem(attr) 删除指定属性创建属性并赋值: var attr=document.createAttribute(attr); 创建属性对象 attr.value=…

原生js自动触发事件

熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为,如点击(click)操作等. 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法. dispatchEvent() 方法给节点分派一个合成事件. 语法如下: dispatchEvent(eventObj) eventObj 参数是一个描述事件的 ActionScrip…

JS里关于事件的常被考察的知识点：事件流、事件广播、原生JS实现事件代理

1.JS里面的事件流 DOM2级事件模型中规定了事件流的三个阶段:捕获阶段.目标阶段.冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素. 冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面. 关于js事件,这里有一篇非常详细的介绍,可以看下:http://www.cnblogs.com/hyaaon/p/4630128.html 2.IE和W3C不同绑定事件解绑事件的方法…

C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25.可不可以刚好保留到最后一位不是0的位置?默认保留2位,如果真的有3位小数,就保留3位,有4位就保留4位. 先说一下ToString("0.00##")中0和#的区别: 0 代表占位的.如果ToString("0.00") 这样就是保留两位小数,无论小数有多少位或者无…

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.getElementsByTagName("div")[0]; //给元素绑定监听事件个人习惯把监听事件写在一块 objSection.addEventListener("touchstart", touchStart, false); objSection.addEve…

JS中的事件类型和事件属性的基础知识

周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习, 小姨子再也不用担心我的学习啦: 从哪里开始呢?????? ??????? 事件的类型 DOM3规定了下面这几事件类型: UI事件:onload,resize,scoll等等; 焦点事件: 鼠标事件: 滚轮事件: 文本事件: 键盘事件: 变动事件:(用的也少): 变动名称事件,当元素的属性名发生改变的时候触发(没啥用, 要弄编辑…

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来. <!DOCTYPE html> <html lang=&qu…

原生JS跨浏览器事件封装处理

引子:用javascript给元素绑定事件,我们可以用addEventListener这个方法,然而这个方法有兼容问题,比如在IE浏览器上面就无效,在IE上面要用attachEvent这个方法一.addEventListener和attachEvent的区别: 1.addEventListener有3个参数,attachEvent只有2个参数,默认是冒泡 2.addEventListener的第一个参数是事件类型(例如:click),attachEvent的第一个参数是事件处理函数名称(例如:…

原生JS元素怎么取消事件

关于原生JS元素怎么取消事件,有3种方式常规方法:removeEventListener 案例: <body> <div id="myDIV"> div 元素添加了 onmousemove 事件句柄,在你移动鼠标时会显示随机数. <p>点击按钮移除 DIV 的事件句柄.</p> <button onclick="removeHandler()" id="myBtn">点我</b…

JavaScript之事件委托（附原生js和jQuery代码）

事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite…

onload事件与ready事件的区别，原生js与jquery的区别

onload事件与ready事件分别是原生js与jquery的入口函数原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document).ready(function(){ }); 二者的区别主要有: 1.加载模式不同: 原生js会等待页面dom元素加载完毕,并且页面图片也加载完毕才会执行: jquery会等到dom元素都加载完毕,但不会等到图片也加载完毕就执行: 2. 通过原生js可以获取到dom元素的属性值: 通过jquery…

原生js监听input值改变事件

哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http://www.cnblogs.com/wteng/p/5434403.html $('input').bind('input propertychange', function() { //to do }) 现在用原生js来实现一遍(其实我翻了下jquery的监听事件on的源码,没找到不知道他写哪了),本…

原生js获得八种方式,事件操作

08.17自我总结关于js 一.原生js获得八种方式通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElem…

JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别想要移除成功,那么三个参数必须跟addEventListener中的三个完全一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&…

【原生js--事件类型】的更多相关文章