深入理解dom事件类型系列第五篇——文本事件

关键词：

<input type="range" min="0" max="10" step="0.5" value="6" />

<input id="test" value="请改变内容并移除焦点">
<script>
test.onchange = function(){
    test.style.backgroundColor = 'pink';
}
</script>

<input id="test" type="range" min="0" max="10" value="6" />
<span id="result"></span>
<script>
test.onchange = function(){
    result.innerHTML = test.value;
}
</script>

<button id="test">按钮</button>
<script>
//控制台只输出1，不输出2
test.onkeypress = function(){console.log(1);}
test.addEventListener('textInput',function(){console.log(2)})
</script>

<input id="test">
<script>
//控制台以1-2的顺序输出
test.onkeypress = function(){console.log(1);}
test.addEventListener('textInput',function(){console.log(2)})
</script>

<input id="test"><span id="result"></span>
<script>
test.addEventListener('textInput',function(e){
    e = e || event;
    result.innerHTML = e.data;
})
</script>

<input id="test">
<script>
test.oninput = function(){
    this.style.background = 'pink';
}
</script>

<input type="range" id="input"><span id="result"></span>
<script>
    input.oninput = function(){
        result.innerHTML = this.value;
    }
</script>

<input type="range" id="input"><span id="data"></span>
<script>
    input.onpropertychange = function(){
        data.innerHTML = this.value;
    }
</script>

<input type="range" id="test"><span id="result"></span>
<script>
//通过userAgent检测IE浏览器
function isIE(){
    var ua = navigator.userAgent;
    //检测Trident引擎，IE8+
    if(/Trident/.test(ua)){
        //IE11+
        if(/rv:(\d+)/.test(ua)){
            return RegExp["$1"];
        }    
        //IE8-IE10    
        if(/MSIE (\d+)/.test(ua)){
            return RegExp["$1"];
        }        
    }
    //检测IE标识，IE7-
    if(/MSIE (\d+)/.test(ua)){
        return RegExp["$1"];
    }    
}
//IE浏览器
if(isIE()){
    test.onchange = function(){
        result.innerHTML = this.value;
    }
//其他浏览器
}else{
    test.oninput = function(){
        result.innerHTML = this.value;
    }
}
</script>

深入理解脚本化css系列第五篇——动态样式

前面的话　　很多时候，DOM操作比较简单明了，因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦。但由于浏览器充斥着隐藏的陷阱和不兼容问题，处理DOM中的某些部分时要复杂一些，比如动态样式就相对较复杂　... 查看详情

深入理解dom事件类型系列第四篇——剪贴板事件

　剪贴板操作可能看起来不起眼，但是却十分有用，可以增强用户体验，方便用户操作。本文将详细介绍剪贴板事件 http://www.cnblogs.com/xiaohuochai/p/5882902.html定义　　剪贴板操作包括剪切(cut)、复制(copy)和粘贴(paste)这三个操作... 查看详情

深入理解dom事件类型系列第四篇——剪贴板事件

×目录[1]定义[2]对象方法[3]应用前面的话　　剪贴板操作可能看起来不起眼，但是却十分有用，可以增强用户体验，方便用户操作。本文将详细介绍剪贴板事件 定义　　剪贴板操作包括剪切(cut)、复制(copy)和粘贴(paste)这... 查看详情

深入理解dom事件机制系列第三篇——事件对象

×目录[1]获取[2]事件类型[3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为前面的话　　在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支... 查看详情

深入理解javascript作用域系列第五篇

前面的话　　对于执行环境(executioncontext)和作用域(scope)并不容易区分，甚至很多人认为它们就是一回事，只是高程和犀牛书关于作用域的两种不同翻译而已。但实际上，它们并不相同，却相互纠缠在一起。本文先用一张图开宗... 查看详情

深入理解dom事件机制系列第二篇——事件处理程序

×目录[1]HTML[2]DOM0级[3]DOM2级[4]IE[5]总结前面的话　　事件处理程序又叫事件侦听器，实际上就是事件的绑定函数。事件发生时会执行函数中相应代码。事件处理程序有HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序... 查看详情

深入理解dom事件机制系列第一篇——事件流

×目录[1]历史[2]事件冒泡[3]事件捕获[4]事件流前面的话　　javascript操作CSS称为脚本化CSS，而javascript与HTML的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，而事件流(又叫事件传播)描述的是... 查看详情

第五篇[机器学习]机器学习，逻辑回归comeon

...可能的结果。逻辑回归的算法最大似然法： 我自己的理解，最大似然法就是在你观测到某一系列事件出现的可能性之后，倒推该事件最可能的概率，这个最可能的概率会使这一系列事件发生的可能性无限接近我们观测到的可... 查看详情

深入学习jquery选择器系列第五篇——过滤选择器之内容选择器

×目录[1]contains[2]empty[3]parent[4]has[5]not前面的话　　本文介绍过滤选择器中的内容选择器。内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上 :contains(text)　　:contains(text)选择器选择含有文本内容为‘text‘的... 查看详情

第五篇深入理解httpsecurity的设计(代码片段)

深入理解HttpSecurity的设计一、HttpSecurity的应用  在前章节的介绍中我们讲解了基于配置文件的使用方式，也就是如下的使用。  也就是在配置文件中通过security:http等标签来定义了认证需要的相关信息，但是在SpringBoot... 查看详情

htmldom第五篇

...，JavaScript能够访问HTML文档中的每个元素。HTMLDOM允许您在事件发生时执行代码。当HTML元素"有事情发生"时，浏览器就会生成事件：在元素上点击加载页面改变输入字段添加、删除和替换HTML元素HTMLDOM允许JavaScript对HTML事件作出反... 查看详情

dom事件深入浅出

在DOM事件深入浅出（一）中，我主要给大家讲解了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点，主要侧重于DOM事件中Event对象的属性和方法。那么什么是DOM事... 查看详情

转载dom事件深入浅出

在DOM事件深入浅出（一）中，我主要给大家讲解了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点，主要侧重于DOM事件中Event对象的属性和方法。那么什么是DOM事... 查看详情

vuenexttick深入理解－vue性能优化dom更新时机事件循环机制(代码片段)

一、定义［nextTick、事件循环］　　nextTick的由来：　　　　由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。　　nextTick的... 查看详情

webpack系列第五篇：彻底理解webpack运行时(代码片段)

全文5000字，深度剖析Webpack运行时的内容、结构与生成原理，欢迎点赞关注。写作不易，未经作者同意，禁止任何形式转载！！！背景在上一篇文章有点难的webpack知识点：Chunk分包规则详解中，我们详细讲解了Webpack默认的分包规... 查看详情

关于ajax第五篇

...的responseText或responseXML属性。AJAX- onreadystatechange 事件当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLH 查看详情

深入理解表单脚本系列第三篇——选择文本

×目录[1]select()[2]select事件[3]setSelectionRange()前面的话　　表单是最早用来与用户交互的工具，具有丰富的控件和属性。基本上，它们通过各种控件和属性就可以解决大部分问题。但还有一些问题还是需要表单脚本来实现的，... 查看详情

react深入系列５：事件处理(代码片段)

...eact进阶之路》作者授权发布，转载请注明作者及出处React深入系列5：事件处理React深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。Web应用中，事件处... 查看详情