1.焦点事件

焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

可以通过以下方式给元素设置焦点：

点击、tab、js

不是所有元素都能够接收焦点的，能够响应用户操作的元素才有焦点。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="text" id="text1" value="请输入内容"><input type="button" id="btn" value="获取文本"></br>

    <input type="text" id="text2" >

</body>

<script>

    function $(id) {

        return document.getElementById(id);

    }

    //onfocus:当元素获取焦点的时候触发

    $('text1').onfocus=function(){

        if(this.value=='请输入内容'){

            this.value='';

        }

    }

    //onblur：当元素失去焦点的时候触发

    $('text1').onblur=function(){

        if(this.value==''){

            this.value='请输入内容';

        }

    }

    //obj.focus() 给指定的元素设置焦点

    $('text2').focus();

    //obj.blur() 取消指定元素的焦点

    //obj.select()选择指定元素里面的文本内容

    $('btn').onclick=function(){

        $('text1').select();

    }

</script>

</html>

2.event事件对象和clientX、clientY

event:事件对象。当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定的地方------event对象，供我们在需要的时候调用。

事件对象必须在一个事件调用的函数里面使用才有内容；

事件函数：事件调用的函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

<script>

    function fn1() {

        alert(event)

    }

    document.onclick=fn1;

</script>

</html>

表示点击事件对象

兼容：

IE/Chrome:event是一个内置全局对象

标准下：事件对象是通过事件函数的第一个参数传入

如果一个函数是被事件调用的，那么，这个函数定义的第一个参数就是事件对象

举例：div随鼠标移动而移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: red;

            position: absolute;/*必须为absolute定位*/

        }

    </style>

</head>

<body>

    <div id="obj"></div>

</body>

<script>

    var oDiv=document.getElementById('obj');

    document.onmousemove=function (ev) {//onmousemove当鼠标在一个元素上面移动的触发  如果一个函数是被事件调用的，那么，这个函数定义的第一个参数就是事件对象

        var ev=ev || event;//考虑到兼容性

        oDiv.style.left=ev.clientX+'px';

        oDiv.style.top=ev.clientY+'px';

    }

</script>

</html>

3.事件流

事件冒泡：

待完善。。。

Event---事件详解的更多相关文章

  1. Event事件详解

    首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...

  2. JavaScript——event事件详解

    1.事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元 ...

  3. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  4. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  5. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  6. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  7. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  8. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  9. iOS中—触摸事件详解及使用

    iOS中--触摸事件详解及使用 (一)初识 要想学好触摸事件,这第一部分的基础理论是必须要学会的,希望大家可以耐心看完. 1.基本概念: 触摸事件 是iOS事件中的一种事件类型,在iOS中按照事件划分 ...

  10. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

随机推荐

  1. 解决wpscan无法更新

    如果wpscan无法更新的话 一般的原因都是源或者更新地址无法访问 下面解决 updatedb #先更新一下系统的索引 locate wpscan #定位到wpscan的目录 大概就是updater. ...

  2. 将现有vue项目基于electron打包成桌面应用程序

    一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目 ...

  3. docker的学习2

    docker基本命令: run 创建一个新的容器并运行一个新的命令 -a stdin: 指定标准输入输出内容类型,可选 STDIN/STDOUT/STDERR 三项: -d: 后台运行容器,并返回容器 ...

  4. 第一课 IP通信

       我们的专业课:<IP通信>开课了.    在第一节课,我们初步了解了关于通信的知识,涨了知识,下面我就说一下第一节课所学所感.    在学习这门课的时候,需要我们认真预习,认真听课, ...

  5. ASP.NET MVC 使用分部视图制作公共头部，尾部，并通过ViewBag传值

    一:新建分部视图 二:布局页_Layout.cshtml上调用 不灵活,不能传递数据,引用静态公共部分 @Html.Partial("_Head") @Html.Partial(& ...

  6. 注册表操作 Microsoft.Win32.Registry与RegistryKey类

    一.注册表操作简介 Registry 类,RegistryKey 类提供了操作注册表的接口 RegistryValueKind:用于指定操作注册表的数据类型 一．注册表巢 在注册表中,最上面的节点是注 ...

  7. Jquery 实现table标题点击复制整列td内容到剪贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 记一次k8s服务504 timeout

    线上服务做集群扩容,调整了节点机器配置,在升级完毕之后,发现某些时候请求较慢,或者直接504 timeout 超时,必现情况,点击几次都是,且并没有代表性. 1.检查istio 日志是否有504 的日 ...

  9. Proxy详解

    一.Proxy基础 1. 什么是Proxy? Proxy是一个构造函数,可以通过它生成一个Proxy实例. const proxy = new Proxy(target, handler); // t ...

  10. 爬虫----异步---高性能爬虫----aiohttp 和asycio 的使用

    前情提要: 首先膜拜loco大佬 肯定有人像我一样.不会异步,发一下. 一:性能比对 多进程,多线程,(这里不建议使用,太消耗性能) 进程池和线程池 (可以适当的使用) 单线程+异步协程   (推荐使 ...