一、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

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

  1. js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行

    js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...

  2. js中当for循环中有事件要使用循环变量时,变量用var声明和let声明的区别

    var 声明一个全局变量,声明的变量会变量提升: let 声明一个局部变量: 当页面加载完后,for循环也结束了,如果用var声明的变量此时也随着for循环的结束而自增到满足结束循环的条件, 此时调用 ...

  3. 为什么js 的constructor中是无限循环嵌套:Foo.__proto__.constructor.prototype.constructor.prototype.constructor.prototype.xxx ?

    constructor始终指向创建当前对象实例的(构造)函数. 任何函数都是Function类的一个实例 那么根据上述可知:任何函数的constructor属性都指向Function类,而Functi ...

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

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...

  5. js和jquery中的事件委托

    [转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...

  6. JS给元素循环添加事件的问题

    <ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...

  7. js闭包理解案例-解决for循环为元素注册事件的问题

      转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html       一.变量的作用域 要理解闭包,首 ...

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

    学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操 ...

  9. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...

随机推荐

  1. css3中我们不知道的一些属性

    1.图片作为边框:border-image; 2.圆角问题:border-radius:上.下.左.右: 3.字体的阴影与自动换行: 阴影: h1 {text-shadow: 5px 5px 5px ...

  2. Linux时间子系统之二:表示时间的单位和结构【转】

    本文转载自:http://blog.csdn.net/droidphone/article/details/7979295 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+] ...

  3. 一步一步学Silverlight 2系列(14):数据与通信之WCF

    一步一步学Silverlight 2系列(14):数据与通信之WCF   概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框 ...

  4. poj 2185 Milking Grid(next数组求最小循环节)

    题意:求最小的循环矩形 思路:分别求出行.列的最小循环节,乘积即可. #include<iostream> #include<stdio.h> #include<stri ...

  5. WebStorm配置SVN

    下载SVN客户端管理工具TortoiseSVN-1.8.5.25224-x64-svn-1.8.8,选择合适的Windows版本 配置项目目录,对应的VCS为Subversion 设置Subversi ...

  6. nable to load bean: type:com.opensymphony.xwork2.util.ValueStackFactory

    严重: Exception starting filter struts2 Unable to load bean: type:com.opensymphony.xwork2.util.ValueSt ...

  7. mysqlerror2003错误原因以及解决方案

    出现mysql #2003错误有一下几种原因 一.mysql数据库没有启动 这种情况也正是我遇到的,到windows服务选项里查看发现没有mysql数据库服务这个选项,记得刚开始安装mysql的时候是 ...

  8. [msf]CentOS VPS创建pptpd 并搭建msf

    安装pptpd服务 vps下 下载 centos 6 一键安装包 wget --no-check-certificate https://raw.githubusercontent.com/teddy ...

  9. merge和rebase

    git里面对于分支的合并处理其实有两种.合并与分基. 对于合并,非常简单.git merge [branch-name] 表示把目标分支合并进当前所在分支   至于分基,简单地讲就是换根.具体细节就不 ...

  10. thrift配置——windows客户端与linux服务端通信(C++)

    windows客户端: 1.首先要安装boost库 下载源文件 2.安装boost之前先要安装python-3.4.0.amd64,很多地方没有说,弄了很久 3.运行bootstrap.bat 生成b ...