js事件、Js中的for循环和事件的关系、this

一、js事件 

1、事件

  用户在网页中所触发的行为

  鼠标滑动种类很多,键盘、表单特列;

  点击:onclick

  鼠标进入:onmouseenter        鼠标离开:onmouseleave

  鼠标悬浮:onmouseover         鼠标移除:onmouseout

  鼠标按下:onmousedown        鼠标抬起:onmouseup

  鼠标移动:onmousemove

  表单聚焦:onfocus           表单失去焦点:onblur

  浏览器加载完成:onload

  js事件是一直存在的,可以绑定方法,也可以不绑定,如果没有绑定,事件都会发生,只是这个事件什么都没有,可以给相应的元素绑定事件和方法

  div . onclick=fiunction(){ } 点击div时就触发了函数中的代码块

2、事件对象

  一个事件触发获得的所有信息都在事件对象中保存着

3、事件源  event . target

  鼠标点在谁的身上,谁就是事件源

4、事件的使用方法

  (1)、事件 将事件当做标签属性使用

     eg:<img src="img/01.jpg"     alt="  "     onclick=alert(456)>

  (2)、通过事件绑定 将事件当成一个元素的属性

     eg:pic [0] . onclick=function() {

            alert(456)

             }

二、Js中的for循环和事件的关系

    事件的执行和for循环没有关系,都是相互独立的。

  1、解决事件中的i和for匹配

    方法一:给事件套一个自调用函数

        for (var i=0;i<arr.length;i++){

          (finction (i) {

              lis [ i ] .onlick=function ( ) {

                  tupian.src=arr [ i ]

                }

              })

            }

    方法二:人为定义属性,将索引在属性里需要的时候,调用属性(用this)

         for (var i=0;i<arr.length; i++){

            lis[ i ].index=i;

            lis [ i ].onclick=function () {

                tupian.src=arr [ this.index ]

                    }

                }

三、this

    This 是js的一个关键字,他是一个对象,一般用在函数里用于指向函数内部的关系。

    Div.onclick=function(){this}

    如果函数在定义的时候前面有.,那么this就指向点前面的对象。

    fn()

    如果函数定义时没有. 那么this就是window

原文地址:https://www.cnblogs.com/yanghuiting/p/9879087.html

时间: 2024-10-20 19:22:11

js事件、Js中的for循环和事件的关系、this的相关文章

事件冒泡中的两个鼠标事件

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type ="text/css"&

JS 实现 select中指定option选中触发事件(下拉框)

转自:http://www.cnblogs.com/moli-/p/6406170.html 在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. 想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件 又在select中添加onclick 这下可好了,没选option呢就触发了 当我们触发select的双击事件时,用ondb

Zepto.js touch模块深入分析 解决手机点击事件

源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ; (function($) { var touch = {}, touchTimeout, tapTimeout, swipeTimeout, longTapTimeout, longTapDelay = 750, gesture function swipeDirection(x1

jquery双击事件(dblclick)时,不触发单击事件(click)

在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click). 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mous

js和jquery中的事件委托

[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签

js循环绑定事件

在js中,用循环来为一对元素队列的元素绑定事件,是一个常见的问题. 通常进入误区的新人,都会这么写代码: (假设元素队列为o,默认使用jQuery) //error method var o =$('.blockHead'); for(var i=0; i<o.length; i++){ o[i].onclick = function(){ function(i){ alert(i); } } } 当然这种情况下,你会发现每个元素点击运行时,显示的 i值 都是 o.length-1: 因为js的

php中的for循环和js中的for循环

php中的for循环 循环100个0 for ($i=0;$i<=100;$i++){ $pnums.='0'.","; } js中的for循环,循环31个相同的数.循环日期时间 var list=[]; for(var i= 0;i < 31;i++){ list.push(620); }//日期时间 var list = []; for (var i = 1; i <= 31; i++) { list.push('2017.01.' + i); }

JS和jQuery中的事件总结(一)

学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操作),此处注明,这是楼主自己的理解哈. 1.页面加载事件 JS提供了一个 window.onload 它的执行时机呢,是页面完全加载完毕后,包括页面上的文件.图片等完全加载到浏览器后才开始执行: 另外,此方法仅能保存对一个函数的引用,会自动的用后面的覆盖前面的.看个例子: function A(){

js中的for循环

1 js中的for循环,实心菱形,空心菱形,九九乘法表,等腰三角形 /* * 2 * * 3 * * * 4 * * 5 * 6 */ 7 8 //实心菱形 9 10 var count=3; 11 for (var i=1;i<=count ;i++ ) 12 { 13 for (var k=3;k>=i ;k-- ) 14 { 15 document.write(" "); 16 } 17 for (var j=1;j<=i ;j++) 18 { 19 docum