event

最近在学习JQ动画，收集一些JQ动画的一些基础知识跟大家分享下！ 加载DOM执行 $(document).ready(function(){}) 简写： $(function(){}) 4.1.2 事件绑定 在文档加载完成后，为元素绑定事件 bind(type[,data],fn) type: 事件类型： 包括blur,focus,click等 第2个可选参数 作为event.data属性传递给事件对象的额外数据对象 eg function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler) 第3个参数为绑定的处理函数 4.1.3 合成事件 hover(enter,leave) 用于模拟光标悬停的事件 当光标移动到元素上，触发第一个函数，移出触发第二个函数 $(function(){ $("#panel h5.head").hover(function(){$(this).next("div.content").show();},function(){$(this).next("div.content").hide()}); }); hover() 替代了JQ中的 bind("mouseenter") 和 bind("mouseleave") 2 toggle()

hash 模式 url 中带有#的便是 hash 模式，#后面是 hash 值，它的变化会触发 hashchange 这个事件。 通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作： window .onhashchange = function ( event ) { console .log(event.oldURL, event.newURL); let hash = location.hash.slice( 1 ); document .body.style.color = hash; } 另外，hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。 history 模式 history api 可以分为两大部分，切换和修改 ① 切换历史状态 包括 back,forward,go 三个方法，对应浏览器的前进，后退，跳转操作 history.go( -2 ); //后退两次 history.go( 2 ); //前进两次 history.back(); //后退 hsitory.forward(); //前进 ② 修改历史状态 包括了 pushState,replaceState 两个方法,这两个方法接收三个参数:stateObj,title,url history

1.把图片拖动到QGraphicsView里并显示，需要进行文件类型检测，拖动动作，丢弃动作 2.需要用到的组件QGraphicsView,QGraphicsItem,QGraphicsScene QGraphicsView,用来显示QGraphicsScene里的内容。 QGraphicsScene,用于管理QGraphicsItem及其子类 QGraphicsItem,是众多对象元素的基类，这些对象元素可以是线，矩形，图像，文本等。 3.需要用到的重载函数 void dragEnterEvent(QDragEnterEvent *event);//拖拽事件 当把文件拖拽进窗口的时候触发的事件，此时应进行文件的类型检查，是否接受这个文件。 void dropEvent(QDropEvent *event);//丢弃事件 拖动到窗口内的文件，当鼠标抬起时触发丢弃事件，如果类型是图片文件就在QGraphicsView里显示。 void resizeEvent(QResizeEvent *event);//窗口大小变化事件 当窗口大小变化时，触发此事件，调整QGraphicsItem以适应窗口大小。 4.选择Graphics View拖动到窗口中 在widget构造函数中加上 setAcceptDrops(true); ui->graphicsView->setAcceptDrops

//Super.vue < template > < div > < child-event @ getEvent = "handlerEvent1" > </ child-event > < child-event @ getEvent = "handlerEvent2($event)" > </ child-event > < child-event @ getEvent = "handlerEvent3(1)" > </ child-event > < child-event @ getEvent = "handlerEvent4($event,1)" > </ child-event > < child-event @ getEvent = "handlerEvent5($event,1,2)" > </ child-event > </ div > </ template > < script > import ChildEvent from "./Child.vue" ; export default { components : { ChildEvent }, methods : { handlerEvent1(ar1, ar2) { console .log(ar1, ar2); //参数一 参数二 }, handlerEvent2($event) {

1.实现目标：目标是输入一个数组，生成一个列表；通过拖拽排序，拖拽结束后输出一个经过排序的数组。 2.实现思路： 2.1是使用HTML5的drag功能来实现，每次拖拽时直接操作Dom节点排序，拖拽结束后再根据实际的dom节点遍历得出新的数组。 2.2使用mousedown,mouseover等鼠标事件来实现，每次监听事件时，仅改动列表项的样式transform，而不操作实际的dom顺序。拖拽结束时，根据transform计算数组项顺序，得出新数组用vue数据驱动的方式重绘列表，重置所有样式。 总的来说就是可以通过不同的监听事件（drag、mouseover），按不同的顺序操作Dom（1.先操作实际dom，再添加动画，在输出数组；2。不操作实际dom，仅改变transfrom，得出新数组，用新数组生成新列表来更新节点）。 3.实际代码 3.1第一种实现 html部分。（被拖拽的元素需要设置draggable=true,否则不会有效果） <div id="app"> <ul @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd" ref="parentNode"> <li v-for="(item,index) in data" :key="index" class="item" draggable=

1. 常用的事件 …… 2. 每个元素身上的事件是天生自带的，不需要我们去定义，只需要我们给这个是事件绑定一个方法，当事件触发的时候就会执行这个方法。 3. 事件绑定的写法 1.div.onclick=function(){} DOM0 级事件绑定 2.div.addEventListener() 或 div.attachEvent() DOM2 级事件绑定 二者的区别 Onclick 是这个元素私有的属性，天生自带的，而 addEventListener() 是公有的属性，从 EventTarget( 事件源 ) 对象上继承来的。 Ie 低版本的 attachEvent 是公有的。 Div.onclick 存在事件冒泡机制没有捕获机制 Div.addEventListener() 可有冒泡可有捕获 Div.attachEvent() 只有冒泡机制 4.div.addEventListener 和 div.attachEvent 的区别 1. 前者有冒泡和捕获机制，后者只有冒泡机制 2. 事件名前者不带 on 后者带 on 3. 前者 this 指向当前元素，后者指向 window 4. 前者是标准浏览器的写法，后者是 ie8 以下 Arguments 每个函数都有一个 arguments 对象，他是这个函数所有参数构造的集合 上面的控制台是 arguments 数组中有一个元素叫

事件：浏览器客户端上客户触发的行为都称为事件。 事件对象：当客户触发一个事件时，浏览器的所有详细信息都存在一个叫event的对象上，我们把它叫事件对象，鼠标到浏览器窗口左上角的距离坐标：clientX clientY 鼠标到网页左上角的距离：pageX pageY ie低版本没有这个属性，如pageX pageY在ie下就要用clientX+scrollTop event的兼容性：document.onclick=function（）{var e=ev||window.event} 事件冒泡：当给父级元素的同一事件绑定方法时，触发子元素身上的事件，执行完毕后，也会触发父元素的相同事件，这种传播机制叫事件冒泡。 取消事件冒泡：event.cancelBubble=true 事件捕获：当父子元素用addEventListener（）绑定同一事件时，当触发子元素身上的事件，会先触发父级元素然后传递给子元素，这种传播机制叫事件捕获。 标准浏览器用addEventListener（） ie低版本用attachEvent（） 二者区别： 　　　　1、addEventListener（）适合标准浏览器 attachEvent（）只用在ie8以下 　　　　2、addEventListener（）事件名不带on attachEvent（）的事件名要加on 　　　　3、addEventListener

事件对象 1.常用的事件：onclick onmouseover onmouseout 2.每个元素 身上的事件是天生自带的，不需要我们去定义，只需要我们给这个事件绑定一个方法，当事件触发的时候就会执行这个方法。 3.时间绑定的方法： 1.div.onclick=function(){}DOM0级事件绑定 2.div.addEventListener()或div.addatchEvent()DOM2级事件绑定。 二者的区别： onclick是这个元素私有的属性，天生自带的，二addEventListener()是公有的属性，从 EventTarget（事件源）对象上 继承来的。 IE低版本的attachEvent是共有的 DIV.click存在事件冒泡没有捕获机制 div.addEventListener()可有冒泡 可有捕获 div.attachEvent()只有冒泡机制 4.div.addEventListener()和div.attachEvent()的区别 1.前者有冒泡和捕获机制，后者只有冒泡机制 2.事件名前者不带on后者带on 3.前者this指向当前元素，后者指向window 4.前者是标准浏览器的写法，后者是IE8以下 Arguments 没一个函数都有一个Arguments对象，他是这个函数所有参数构造的集合

每个元素身上的事件是天生自带的，不需要我们去定义，只需要我们给这个事件绑定一个方法，当事件触发的时候就会执行这个方法。 事件绑定的写法 1.div.onclick=function（）{}···DOM0级 2.div.addEventLostener（）或div.attachEvent（）···DOM2级 二者区别 onclick是这个元素的私有属性，天生自带的，而addEventLostener（）是公有属性 ie低版本的attachEvent（）是公有的 div.onclick=function（）{}存在事件冒泡机制没有捕获机制 div.addeventLostener（）可有冒泡可有捕获 div.attachevent（）只有冒泡 div.addeventLostener（）和div.attachWvent（）区别 1.前者有冒泡和捕获机制后者只有冒泡机制 2.事件名前者不带on后者带on 3.前者this指向当前元素，后者指向window 4. arguments 每个函数都有一个arguments对象，他是这个函数所有参数构成的集合 每个事件的方法中浏览都给他一个参数叫mouseevent，我们所有鼠标的信息都临时存储在这个mouseevent对象上 mouseevent有兼容性 标准浏览器可以直接读取，但是ie不行 解决方法 div.onclick=function

一、事件对象 　　1、每个元素身上是天生存在的，不需要我们去定义，只需要我们给这个事件绑定一个方法，当事件触发的时候，就会执行这个方法 　　2、 事件绑定的方法： 　　　　（1）、DOM0级绑定：div . onclick=function() { } 　　　　（2）、DOM2级绑定：div . addEventLister() || div . attachEvent() 　　　　二者的区别： 　　　　　　（1）、onclick是这个元素私有的属性，而addEventLister（）是公有的属性，从EventTarget（事件源）对象上继承来的 　　　　　　　　　　IE低版本的attchaEvent是公有的 　　　　　　（2）、div . onclick存在事件冒泡机制，没有捕获机制 div . addEventListener（）可有冒泡，可有捕获 　　　　　　　　　 div . attachEvent（）只有冒泡机制 　　　　 attachEvent（）和addEventListener（）的区别 　　　　（1）、attachEvent只用在Ie8以下，addEventListener（）适合标准浏览器 　　　　（2）、attachEvent的事件名带on，而addEventListener事件名不带on 　　　　（3）、attachEvent函数里面的this是window